How to display the workHr that comes as json data in table format using vue js?

My json data is

{"status": true, "data": {"pid": 10, "businessName": "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"}}

Currently I am displaying data as

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

I need to display {{data.workHr}} in the form of a table

My table is as

 <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>

I need to display the corresponding working hours that come from json data under each day? Can please anybody help me to solve the issue??

Solution

I think this is what you are asking for. Iterate over the weekTimings and display each value in your table.

    var data = {  
       "status":true,
       "data":{  
          "pid":10,
          "businessName":"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>

Using Vue.js

You can iterate over the array using v-for and display the data

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

Hope this helps :)