如何排列json数据？

Question

这就是我获取 json 数据的方式

"wrk_hours": [{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Tuesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Wednesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Thursday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Friday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Saturday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Sunday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Monday"}]

所以，我需要从周一到周日安排。 如果缺少某些日子..我需要打印为已关闭。我怎样才能从上述数据中获得相同的数据。

目前我正在做

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

但是当我这样做时，数据以相同的方式在数据中出现，我需要将数据安排为星期一，星期二，星期三......星期日。

有时。我得到的数据为

"wrk_hours": [{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Sunday"},{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Tuesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Wednesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Friday"},{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Monday"}]

所以这里没有星期四和星期六。所以，我需要打印为已关闭。那么，我怎样才能做到这一点。请帮忙获取结果？

我的vue js代码是

new Vue({ 
 el: '#feed' , 
 data: { 
 data: [], 
 work: '',
 pid: ''
 }, 
 mounted() { 
this.$nextTick(function() {    
data['pid'] = this.pid;
 $.ajax({ 
 url: "https://need2spot.com/alpha/get/post/", 
 data: data,
 type: "POST",
 dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
  self.data = e.data;
  self.reviews = e.data['reviews'];
  self.work = e.data['wrk_hours'];
  console.log(self.wrk_hours)
}
}
});
}) 
 }, 
 })

Answer 1

您可以在显示数据之前操作您的 JSON。 创建一个数组，该数组将按照您想要的特定顺序维护天数列表。然后，将 wrk_hours 数组的日期与 dayList Array（使用 Array.indexOf）相匹配。将结果推送到新数组中的特定位置。如果缺少某个特定日期，newArray 的索引将为空，否则它将按您想要的特定顺序包含结果。

function getNewArray(object){
  newData = []
  object.forEach((obj) => {
	  index = days.indexOf(obj.day.toLowerCase())
	  newData[index] = obj
  })
  return newData
}
data = {"wrk_hours": [{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Tuesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Wednesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Thursday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Friday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Saturday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Sunday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Monday"}]}

//Order in which you want days list to be created
days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"]

console.log(getNewArray(data.wrk_hours))

data2 = {"wrk_hours": [{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Sunday"},{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Tuesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Wednesday"}, {"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Friday"},{"opens_at": "09:00:00", "closes_at": "23:00:00", "day": "Monday"}]}

//If thurday is not present, the new array will have that index empty. You can check for it to print closed
console.log(getNewArray(data2.wrk_hours))

希望对你有帮助