如何使用vue js以表格格式显示作为json数据的workHr？

Question

我的 json 数据是

{"status": true, "data": {"pid": 10, "bussinessName": "Ey technology", "services": "1, 3, 4, 2", "inventory": ["specs", "Eye Testing", "Lens", "Doctors"], "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM", "description": "Good technology company for software", "category": 1, "sub_category": ["Homeo pathy", "Web development"], "lat": 9.5274336, "lon": 76.8224309, "contactName": "simon", "contactEmail": "simon@gmail.com", "contactOfficeAddress": "college of Eng", "contactNumber": "1236547859", "contactOfficeNumber": "8947123658", "state": "Kerala", "city": "Koy", "place": "Kly", "pincode": 686514, "referer": 24, "link": 24, "views": 0, "package": 1, "listing_pic": "default", "website": "www.ey.com"}}

---

目前我将数据显示为

 <p><i class="fa fa-map-marker" aria-hidden="true"></I>{{data.place}}, {{data.city}}, {{data.pincode}}</p><br>

我需要以表格的形式显示 {{data.workHr}}

我的桌子是

 <table class="table">
  <thead>
    <tr>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>
  </thead>
  <tbody>
    <tr>

      <td></td>
       <td></td>
        <td></td>
         <td></td>
          <td></td>
           <td></td>
            <td></td>
    </tr>
  </tbody>
</table>

我需要在每天下显示来​​自json数据的相应工作时间吗？ 可以请任何人帮我解决这个问题吗？

Answer 1

我想这就是你所要求的。 遍历weekTimings并在表中显示每个值。

 var data = { "status":true, "data":{ "pid":10, "bussinessName":"Ey technology", "services":"1, 3, 4, 2", "inventory":[ "specs", "Eye Testing", "Lens", "Doctors" ], "workHr":"Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM", "description":"Good technology company for software", "category":1, "sub_category":[ "Homeo pathy", "Web development" ], "lat":9.5274336, "lon":76.8224309, "contactName":"simon", "contactEmail":"simon@gmail.com", "contactOfficeAddress":"college of Eng", "contactNumber":"1236547859", "contactOfficeNumber":"8947123658", "state":"Kerala", "city":"Koy", "place":"Kly", "pincode":686514, "referer":24, "link":24, "views":0, "package":1, "listing_pic":"default", "website":"www.ey.com" } } var weekTimings = data.data.workHr.split(",").map(day => { let arr = day.split(":") arr.splice(0,1); return arr.join(":"); }); var sundayTiming = weekTimings.pop(); weekTimings.unshift(sundayTiming); console.log(weekTimings); // You can do like below using JS or you can use jQuery and shorten your code document.getElementById("sun").innerHTML = weekTimings[0]; document.getElementById("mon").innerHTML = weekTimings[1]; document.getElementById("tue").innerHTML = weekTimings[2]; document.getElementById("wed").innerHTML = weekTimings[3]; document.getElementById("thu").innerHTML = weekTimings[4]; document.getElementById("fri").innerHTML = weekTimings[5]; document.getElementById("sat").innerHTML = weekTimings[6];

 <table class="table"> <thead> <tr> <th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> </tr> </thead> <tbody> <tr> <td id="sun"></td> <td id="mon"></td> <td id="tue"></td> <td id="wed"></td> <td id="thu"></td> <td id="fri"></td> <td id="sat"></td> </tr> </tbody> </table>

使用 Vue.js

您可以使用v-for遍历数组并显示数据

<td v-for="day in weekTimings">{{ day }}</td>

希望这可以帮助 ：）

Answer 2

您可以将 workHr 修改为对象数组，因此迭代它们会更容易。 例如

 const workHour = "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM".split(',').map((val) => { const obj = val.split(':'); const time = val.replace(`${obj[0]}:`, ''); return { day: obj[0], time, } }); console.log(workHour); /* following is the output of the code above [ { day: 'Monday', time: '9:00AM to 5:00PM'}, ........ ] */

然后，您可以将 workHour 分配给数据

data.workHr = workHour;

然后，很容易迭代你的表

<table class="table">
  <thead>
    <tr>
      <th v-for="(item,key) in data.workHr" :key="key">{{item.day}}</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in data.workHr" :key="key">{{item.time}}</td>
    </tr>
  </tbody>
</table>

Answer 3

您还可以为日期和时间制作两列表

 var app = new Vue({ el: "#vue-instance", data: { formData:{"status": true, "data": {"pid": 10, "bussinessName": "Ey technology", "services": "1, 3, 4, 2", "inventory": ["specs", "Eye Testing", "Lens", "Doctors"], "workHr": "Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM", "description": "Good technology company for software", "category": 1, "sub_category": ["Homeo pathy", "Web development"], "lat": 9.5274336, "lon": 76.8224309, "contactName": "simon", "contactEmail": "simon@gmail.com", "contactOfficeAddress": "college of Eng", "contactNumber": "1236547859", "contactOfficeNumber": "8947123658", "state": "Kerala", "city": "Koy", "place": "Kly", "pincode": 686514, "referer": 24, "link": 24, "views": 0, "package": 1, "listing_pic": "default", "website": "www.ey.com"}} }, methods:{ getWorkHrs: function(){ var workhrs = {}; this.formData.data.workHr.split(",").map(function(e){ var temp = e.split(" :"); var tempObj = {}; workhrs[temp[0]] = temp[1]; //workhrs.push(tempObj); }); return workhrs; }, }, components: { }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script> <div id="vue-instance"> <table> <tr><th>Day</th><th>Time</th></tr> <tr v-for="(time,day) in getWorkHrs()"><td>{{day}}</td><td>{{time}}</td></tr> </table> </div>