Vue make axios GET and display data to correct user?

1

This is connected to How to get value if key? which I can use to display the correct measurement to the correct box.

I have a user profile card that displays different measurements in boxes, such as temperature, volume and weight.

Currently I’m getting the name of each user from an axios GET request, I need to then take the ID in that data and perform another GET request with the ID which gives me a performance data, in that data I am given a performance ID which I need to use to GET a final array of measurement data.

But I’m wondering how I can take the data of the measurements and display in each user profile{that has measurement data) for each measurement box? For example lets say I have 3 objects of profile details and 2 of measurement data, how can I show the measurement data with performance ID 2 to profile ID 3?

It looks something like this:

  1. I make the first axios request in vuex and use v-for to display each user name:
    GET api/profiles which returns:
"data": [
        {
            "id": 1,
            "name": "Joe",
        },
        {
            "id": 2,
            "name": "Max",
        },  

<div class="outer"  v-for="(item, index) in profiles" :key="item.id" >
 <p> User Name: {{ item.name }}</p>
  1. I then need to make another GET request for performance:
    GET api/performance/{profileID} which returns only for users who have (other users return empty data object):
mounted() {
this.$store.state.profiles.forEach((item, index) => {
        axios.get('api/performance/' + this.profile[index].id)
            .then(response => {
            this.performanceId = response.data.data.id
          })
    });
}

 "data": {
        "id": 1,
        "profile_id": 2,
        .....other keys and values
      }
  1. and lastly for the users that have a performance ID I need to get the measurements:
    GET api/measurements/{profileID}/{performanceID} which returns for Max:
"data": {
        "profileID": "2",
        "perfomanceID": "1",
        "data": [
            {
                "key": "temp",
                "data": "37",
            },
            {
                "key": "vol",
                "data": "22",
            },
            {
                "key": "weight",
                "data": "200",
            },

I would then like each data point to display in the box:

<div class="outer"  v-for="(item, index) in profiles" :key="item.id" >
    <p> User Name: {{ item.name }}</p> 
    <div class="box 1">Temperature: </div>
    <div class="box 2">Volume: </div>
    <div class="box 3">Weight: </div>
</div>

The end result would look like:
User Name: Max                  User Name: Joe
  Temperature: 37               Temperature: 36.5
  Volume: 22                    Volume:  N/A
  Weight: 200                   Weight: 150

The requests all together:

created(){
   axios.get('/api/api/profiles/').then(res => this.profiles = res.data.data).then(
     this.profiles.forEach((item, index) => {
       axios.get('api/api/performance/' + item.id)
        .then(response => { if(response.data.data) {
         axios.get('api/api/measurements/' + item.id + "/" + response.data.data.id)
       .then(response => {if(response.data.data) {response.data.data) })}  
     }); 
  }))
  },

Any help would be appreciated, thanks!

2

Hey there,

would be awesome to see a small working project on codesandbox, either by importing it from Github or by using a Vue template, so we can test stuff.

3

Hi @miku86 I made a small working project, I’m unable to use my actual code but in this example the final axios request in the created hook of Profile.vue console.log('final data',response.data) displays the data I need to display in the template.

I made only Max(profile id:2, performance id: 1) and Joe’s(profile id:1, performance id: 3) profiles return data. (I also added console logs for the data with profile id and names and for the performance id)

(In my actual code I’m using vuex to store profiles and then display using v-for="(item, index) in profiles", here I just added profiles array in data(return{}))

The end result should look like:
Screenshot from 2020-08-28 12-41-20

Thanks so much!

1 Like
4

@miku86 so basically for this I just need help displaying the data that comes from the last axios call to the correct user.

5

Hey there,

I missed that one.

Have you found a solution?

6

Hi no worries!

Not yet, I’m still confused about how to display the the data from the last axios call to the correct user, since I display the profiles via v-for in the template.

I tried doing something like if the profile Id = the final id I get from axios then display in the template but it didn’t work properly.