Question

My json data is in the following way

{"data": {"pid": 80,  "package": 0, "contact": {"email": "a4u@gmail.com", "phone": 472, "address": {"country": "India"}}, "about": "sadfbgmjhmhhgr", "created_at": "2018-01-11", "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": "Tuesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Monday"}], "status": true}

现在，我需要在页面中显示day和opens_at以及closes_at。我需要在星期一，星期二，星期三，星期四，星期五，星期六，星期天展示。我需要显示所有的日子。但有些日子不见了。有些日子我不见了，我需要代替时间表示关闭。我怎样才能实现相同的

我目前的代码是

<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: "/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

创建一个days = ["Sunday","Monday", "Tuesday"...];数组，然后创建一个函数来检查数组data.wrk_hours中是否存在日期，如果是，则return {{item.opens_at}} to {{item.closes_at}}否则返回＆＃34;已关闭＆＃34 ;;

＆＃13;

<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 days" :key="key">
        <span v-if="new Date().getDay()-1==key" class="today">{{item}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item}}</span>
        <span v-else class="all">{{item}}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in days" :key="key">
         <span v-if="new Date().getDay()-1==key" class="today">{{ checkIfItemInWorkHours(item) }}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{ checkIfItemInWorkHours(item) }}</span>
        <span v-else >{{ checkIfItemInWorkHours(item) }}</span>
    </td>
    </tr>
 </tbody>
</table>

＆＃13;

checkIfItemInWorkHours: function(day){
  for (let x in this.data.workHours) {
    if(this.data.workHours[x].day == day) return `${this.data.workHours[x].opens_at} to ${this.data.workHours[x].closes_at}`;
  }

  return "closed";
}

＆＃13;

如果json数据中没有日，如何显示“已关闭”？

1 个答案: