0

I'm trying to sort the dates from this external API in my latestResults array by latest on top to oldest on bottom but can't seem to figure out how.
Right now they're displayed with the oldest date first and it's working fine, but it's in the wrong order for me.
I tried using result in latestResults.reverse() but that just reverses the 7 items currently in the array.

HTML:

<div v-for="result in latestResults" v-bind:key="result.latestResults">
      <small">{{ result.utcDate }}</small>
</div>

Script:

     <script>
    
    import api from '../api'
    
    export default {
    
        data () {
        return {
          latestResults: [],
          limit: 7,
          busy: false,
          loader: false,
        }
      },
    
        methods: {
    
            loadMore() {
                this.loader = true;
                this.busy = true;
            api.get('competitions/PL/matches?status=FINISHED')
            .then(response => { const append = response.data.matches.slice(
                this.latestResults.length,
                this.latestResults.length + this.limit,
                this.latestResults.sort((b, a) => {
                    return new Date(b.utcDate) - new Date(a.utcDate);
                })
            );
            setTimeout(() => {
            this.latestResults = this.latestResults.concat(append);
            this.busy = false;
            this.loader = false;
        }, 500);
        });
      }
    },
    
    created() {
        this.loadMore();
      }
    }
    
    </script>

The JSON where I'm getting matches like this that has utcDate:

    {
    "count": 205,
    "filters": {
        "status": [
            "FINISHED"
        ]
    },
    "competition": {
        "id": 2021,
        "area": {
            "id": 2072,
            "name": "England"
        },
        "name": "Premier League",
        "code": "PL",
        "plan": "TIER_ONE",
        "lastUpdated": "2021-02-01T16:20:10Z"
    },
    "matches": [
        {
            "id": 303759,
            "season": {
                "id": 619,
                "startDate": "2020-09-12",
                "endDate": "2021-05-23",
                "currentMatchday": 22
            },
            "utcDate": "2020-09-12T11:30:00Z",
            "status": "FINISHED",
            "matchday": 1,
            "stage": "REGULAR_SEASON",
            "group": "Regular Season",
            "lastUpdated": "2020-09-13T00:08:13Z",
            "odds": {
                "msg": "Activate Odds-Package in User-Panel to retrieve odds."
            },
        },
5
  • 1
    Does this answer your question? Sort array by date in Javascript Commented Feb 1, 2021 at 17:09
  • I've tried a couple different solutions but I'm not very good and can't seem to get anyone of them working properly, hence why I'd like some help with this specific case Commented Feb 1, 2021 at 18:30
  • 1
    Your sorting function refers to a.latestResults, but there's no such property in your sample data. Commented Feb 1, 2021 at 19:27
  • Okay so I finally managed to solve my initial problem by doing like this: this.latestResults.sort((a, b) => { return new Date(b.utcDate) - new Date(a.utcDate); }) Now it sorts by latest to oldest from top to bottom, but that only seem to work when I'm not using a limit. When I'm using the limit and the API gets 7 more matches it will load the oldest matches first for some reason, anyone got a clue? Commented Feb 3, 2021 at 9:25
  • SOLVED! The first thing I tried before even making this post was using .reverse, but I obviously used it in the wrong way and then I went on to try other things. I gave it a go again and got it to work this time by putting it in my script just before the .splice instead of in the v-for loop and now it works just fine, didn't even have to use .sort. This is the final code: .then(response => { const append = response.data.matches.reverse().slice(this.latestResults.length, this.latestResults.length + this.limit,); Commented Feb 3, 2021 at 11:34

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.