Question

我正在使用api租用Json

new window.Vue({
el: '#containerwrapper',
data() {
return {
bannerData:""
}
},
created() {
axios.get('http://localhost:8080/pi.json')
.then(response => {
this.bannerData = response.data;
});
},
})

这给了我Json数据如下

[
  {
    "id": 118,
    "title": "Feuerwerk",
    "location": "MUC",
    "pressInformation": [
      {
        "id": 215,
        "tstamp": "1577110478",
        "created": "2019-09-10T12:13:53+02:00",
        "title": "Chemi215",
        "teaser": "",
        "subline": "Ursachenforschung dauert"
        }
    ]
  },
  {
    "id": 144,
    "title": "Testing Stage",
    "location": "BER",
    "pressInformation": [
      {
        "id": 254,
        "tstamp": "1576838212",
        "created": "2019-11-27T13:47:31+01:00",
        "title": "Chemi254",
        "teaser": "",
        "subline": ""
        },
      {
        "id": 250,
        "tstamp": "1576838221",
        "created": "2019-12-09T12:36:36+01:00",
        "title": "Chemi250",
        "teaser": "",
        "subline": ""
        }
    ]
  }
]

我按如下所示渲染模板中的数据

<div v-for="(eventTitle, i) in bannerData">
    <div v-for="(title,index) in eventTitle.pressInformation" :key="title.id">
        <div id="pressTimeStamp">{{title.created}} Uhr</div>
        <div id="pressTitleTitle">{{title.title}}</div>
        <div id="pressTitle">
        <h2>{{eventTitle.title}}</h2>
        <div id="pressSubline">{{title.subline}}</div>
    </div>
</div>

并且输出如我所料。有人可以建议我，如何编写一种方法以使我的输出得到整理取决于“创建的”时间戳

Answer 1

new window.Vue({
el: '#containerwrapper',
data() {
return {
bannerData:""
}
},
created() {
axios.get('http://localhost:8080/pi.json')
.then(response => {
response.data.pressInformation.sort(function(a, b){return b['tstamp']-a['tstamp']}));
this.bannerData = response.data;
});
},
})

Answer 2

您可以将sort方法与回调函数一起使用。

从您的数据看来，您已经具有以秒为单位的时间戳。很容易使用它进行排序。

例如，您可以编写如下内容：

arr.sort(function(a, b) {
  return +a.pressInformation.tstamp - +b.pressInformation.tstamp;
});

如果您正在写a-b表示升序，而b-a则表示降序。

此处使用多余的+符号将字符串从字符串转换为整数。

文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

根据Vuejs中的时间戳对Json数据进行排序

2 个答案: