如何使用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>

希望这可以帮助 :)