How to get the correct object in an nested array in Vue.js?

Question

I use Axios to display a JSON data and I have succeeded. But I want to show an object based on date and time, it shows now all data and I need to filter it.

So I want to look at today's date and show the object based on that, so I want to show the next upcoming event. (24/05/2020)

What I currently have:

Json:

{
    "doc": [
        {
            "data": {
                "events": {
                    "18807612": {
                        "_dt": {
                            "_doc": "time",
                            "time": "18:45",
                            "date": "14/05/20",
                            "tz": "UTC",
                            "tzoffset": 0,
                            "uts": 1566067500
                        },
                        "week": 33,
                        "teams": {
                            "home": {
                                "name": "name 1",
                                "mediumname": "name1",
                                "uid": 3014
                            },
                            "away": {
                                "name": "name 2",
                                "mediumname": "name 2",
                                "uid": 3020
                            }
                        }
                    },
                    "18807618": {
                        "_dt": {
                            "_doc": "time",
                            "time": "18:45",
                            "date": "24/05/20",
                            "tz": "UTC",
                            "tzoffset": 0,
                            "uts": 1566067500
                        },
                        "week": 33,
                        "teams": {
                            "home": {
                                "name": "name 1",
                                "mediumname": "name1",
                                "uid": 3014
                            },
                            "away": {
                                "name": "name 2",
                                "mediumname": "name2",
                                "uid": 3020
                            }
                        }
                    }
                }
            }
        }
    ]
}

Store:

async loadPosts({ commit }) {
    // Define urls pages
    const urlEvents = 'http://api.example.com/302020';

    // Set pages
    const [
      responseEvents
    ] = await Promise.all([
      // Responses pages
      this.$axios.get(urlEvents)
    ]);

    // variables pages
    this.events = responseEvents.data.doc[0].data.events

    // mutations pages
    commit('SET_EVENTS', this.events)
  }
},

mutations: {
  SET_EVENTS (state, events) {
    state.events = events;
  }
}

And to show the data I use this:

import {mapState} from 'vuex';

export default {
  name: 'NextMatch',
  mounted() {
    this.$store.dispatch('loadPosts')
  },
  computed: {
    ...mapState([
      'events'
    ])
  }
}

<h1>{{events}}</h1>

But this shows all data, and what I try to get is the first upcoming event for the object with the "uid": 3014.

So I want to show the date, time and names of the home and away team.

How can I get the correct data by filtering the data?

i can't see where fixtures comes from, but presumably you should do something like fixtures.doc.data.events.find(x => x.teams.home.uid === 3014) and probably put this in a computed property rather than directly in the template — Cato Minor
– Cato Minor, Commented May 23, 2020 at 1:54
Do you have an example for how to use this in an computed property? — Can
– Can, Commented May 23, 2020 at 22:41
Sure, i described it in the answer I left. Something similar to that should work. — Cato Minor
– Cato Minor, Commented May 24, 2020 at 3:33

Cato Minor · Accepted Answer · 2020-05-24 20:19:50Z

1

Something like this or similar to this should work:

In your Vue component's <template>:

`<h1>{{selectedEvent._dt.date}}</h1>`

In your Vue component's <script>:

    props: {
        eventID: {
          type: Number,
          default: 3014
        },
    },
    computed: {
      ...mapState([
        'events'
      ]),
      eventsArr(){
        if (!this.events) return {} //make sure Object.entries gets object.
        return Object.entries(this.events)
      },
      selectedEvent(){
        const selectedArr = this.eventsArr.find(([eID, e]) => e.teams.home.uid === this.eventID)
        return selectedArr[1]
      } 
    }

edited May 24, 2020 at 20:19

answered May 24, 2020 at 3:31

Cato Minor

3,1094 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Can Over a year ago

this doesn't work bro. maybe because using mapState in the controller? See my first message.

Can Over a year ago

I get this.events.find is not a function

Cato Minor Over a year ago

Oh i see -- events is not an array, it is an object. So we have to convert it to an array (using something like Object.entries()) to use .find on it. I'll update the answer.

Cato Minor Over a year ago

Well, that's really getting into a different question now, but I would do something like instead of .find use .reduce and, as .reduce iterates, keep updating the reduce "accumulator's" value to the current element's value if a more recent event is found.

Cato Minor Over a year ago

im sorry, im out of time at this point, but i wish u all the best with your progress on this :). in general, i would just read up on functional programming in JS a little more.

|

Collectives™ on Stack Overflow

How to get the correct object in an nested array in Vue.js?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related