sort the Json data According to timestamp in Vuejs

Question

I am rending a Json using api

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

This gives me the Json data as follows

[
  {
    "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": ""
        }
    ]
  }
]

I render the data in my template as follows

<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>

And the output is coming as i expected. Can someone suggest me, how to write a method so my output would be sorted out depends on the 'created' timestamp

Does this answer your question? [How to sort an array by a date property](https://stackoverflow.com/questions/10123953/how-to-sort-an-array-by-a-date-property) — Muhammad, Dec 24 '19 at 13:42

score 0 · Answer 1 · answered Dec 24 '19 at 13:57

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;
});
},
})

answered Dec 24 '19 at 13:57

Jeroen de Beer

340
4
15

I do get error: Uncaught (in promise) TypeError: Cannot read property 'sort' of undefined – Sreenivasulu Gudipati Dec 24 '19 at 23:08

score 0 · Answer 2 · answered Dec 24 '19 at 15:00

You can use the sort method with a callback function.

From your data it seems that you already have the timestamp in seconds. It is easy so sort using that.

For example you can write something like this:

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

If you are writing a-b denotes ascending order, while b-a is descending order.

The extra + signs are used here to convert from string to int.

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

Thank you, But this function is not returning me sorted array `response.data.sort(function(a, b){ return +a.pressInformation.tstamp - +b.pressInformation.tstamp});` I guess, `pressInformation.tstamp` is undefined as pressInformation is an array of objects. — Sreenivasulu Gudipati, Dec 24 '19 at 23:15

sort the Json data According to timestamp in Vuejs

2 Answers2