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

user_6790340 0
Viewed 607

My json data is

{"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"}}

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

vue.js javascript
3 Answers

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

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

user_62854100

You can modify your workHr to array of object, so it will be easier to iterate over them. For example 

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'},
      ........
    ]
*/

Then, you can assign workHour to data

data.workHr = workHour;

Then, it's easy to iterate over your table 

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

You can also make two column table for day and time

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>

user_28156350
Related