Question

我的json数据按以下顺序

{"data": {"pid": 50,  , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "4u@gmail.com", "phone": 85472, "address": {"country": "India"}}, "about": "sadfbgmjhmhhgr", "reviews": [], "wrk_hours": [{"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Saturday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Friday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Thursday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Wednesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Tuesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Monday"}], }, "status": true}

我需要以表格格式显示wrk _hours。我使用以下代码来显示相同的

<table bgcolor="#00FF00" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-bordered">
  <thead>
    <tr bgcolor="#577c14">
      <th v-for="(item,key) in data.wrk_hours" :key="key">
        <span v-if="new Date().getDay()-1==key" class="today">{{item.day}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.day}}</span>
        <span v-else class="all">{{item.day}}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in data.wrk_hours" :key="key">
         <span v-if="new Date().getDay()-1==key" class="today">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else >{{item.opens_at}} to {{item.closes_at}}</span>
    </td>
    </tr>
         </tbody>
                </table>

我的vue js代码是

new Vue({ 
 el: '#feed' , 
 data: { 
 data: [], 
 }, 
 mounted() { 

this.$nextTick(function() {    
 $.ajax({ 
 url: "http://127.0.0.1:8000/alpha/get/post/", 
 data: {
        pid: pid,
        },
 type: "POST",
 dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
  self.data = e.data;

 } 
 else 
 { 
 console.log('Error occurred');} 
 }, error: function(){ 
 console.log('Error occurred'); 
 } 
 }); 


 }) 
 }, 
 })

但是当我按照以下方式做的时候，第一个星期六就要到了星期五，等等。我怎样才能从星期一，星期二等显示。请帮我按以下格式显示？

周日也不存在于json数据中。我需要星期天在桌子上打印并关闭？请帮我解决问题

Answer 1

试试这个

   let result = {"data": {"pid": 50,  , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "4u@gmail.com", "phone": 85472, "address": {"country": "India"}}, "about": "sadfbgmjhmhhgr", "reviews": [], "wrk_hours": [{"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Saturday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Friday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Thursday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Wednesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Tuesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Monday"}], }, "status": true}

// reverse the array of work hours
result.data['wrk_hours'].reverse();

// then add the data u want for sunday

result.data['wrk_hours'].push({"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Sunday"});

然后你可以正常进行你的v-for循环

<table bgcolor="#00FF00" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-bordered">
  <thead>
    <tr bgcolor="#577c14">
      <th v-for="(item,key) in data.wrk_hours" :key="key">
        <span v-if="new Date().getDay()-1==key" class="today">{{item.day}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.day}}</span>
        <span v-else class="all">{{item.day}}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in data.wrk_hours" :key="key">
         <span v-if="new Date().getDay()-1==key" class="today">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else >{{item.opens_at}} to {{item.closes_at}}</span>
    </td>
    </tr>
         </tbody>
                </table>

希望它有所帮助：）

如何在vue js html中以相反的顺序显示json数据？

1 个答案: