0

我正在使用 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>

输出如我所料。有人可以建议我吗，如何编写一个方法以便整理我的输出取决于“创建”时间戳

4

2 回答 2

0 
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;
});
},
})
于 2019-12-24T13:57:33.873 回答
0

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

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

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

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

如果你写的是a-b升序，b-a而是降序。

此处使用额外的+符号将字符串转换为 int。

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

于 2019-12-24T15:00:18.367 回答