Vue display data to correct user after axios GET requests?

See more:

Javascript

JSON

vue.js

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

I made a small working project Here
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.

Thanks so much!

What I have tried:

I've tried saving the final data into the Profile array containing the objects of the names and doing something like this:

{{ item.id == idNums.profile_id ? idNums.data[1].data: "" }}

So if the profile Id in profile data = the profile Id in measurement data(that I saved to the profile array) it should display but it didn't properly work and there was a huge data lag.