Replace objects within nested Array

Question

I have an array in which another array of agents is stored. In this agents array only the id of each agent is located. Using the id's, I fetch the data I need for each agent and I want to replace the original agent array with the new, completed agent data. Or at least push the new data to the specific agent. Here is what I have tried so far. Is there a simple way to do it?

How to use the fetched agent in filteredEvents? As seen in my expected result

filteredEvents: [
 { 
  agents: ['id', 'id'], // the id's are as plain text located
  eventData: ''
 }
]


// Expected result
filteredEvents: [
 { 
  agents:
  [
    { id: '', name: '', ...}, // the data from the fetched id
    { id: '', name: '', ...},
  ],
  eventData: ''
 }
]

otherAgentsEvents() {
  // Not that relevant currently
  // const events = this.events
  // const user = this.getUser._id
  // const filteredEvents = events.filter(event => !event.agents.includes(user));

  filteredEvents.forEach(event => {
    const agents = event.agents

    agents.forEach(agent => {
      const data = this.fetchAgentData(agent)
      // replace 'event.agents[agent]' with this data
    })
  })

  return filteredEvents
}

async fetchAgentData(agentID) {
  try {
    const agent = await this.$axios.$get(`/api/get-specific-agent/${agentID}`)

    if (agent.success) {
      return agent.data
    }
  } catch (err) {
    console.log(err)
  }
}

Html for better understanding

<div v-for="(event, key) in otherAgentsEvents" :key="key">

  <div v-for="agent in event.agents" :key="agent.id">
    // Currently I haven't access to first_name etc. 
    // only to agent where only the plain ID is stored
    <p>{{ agent.first_name }}</p>
  </div>
  
  <div>
    {{ event.eventData }}
  </div>

</div>

---

Update based on tao's answer

I have tried to implement the code, but am probably doing something wrong. Here's what I did.

I use vuex, I have never worked with pinia. Reactive is not defined, I left it out. I don't know where to get it.

import axios from 'axios'

const store = {
  agents: [],
  getAgent: (id) =>
    new Promise((resolve) => {
      console.log(id)
      const agent = store.agents.find(({ id: i }) => i === id)
      if (agent) {
        resolve(agent)
      } else {
        axios.get(`/api/get-specific-agent/${id}`).then(({ data }) => {
          store.agents.push(data)
          resolve(data)
        })
      }
    }),
}

export const useAgents = () => store

otherAgentsEvents() {
  // const events = this.events
  // const user = this.getUser._id
  // const filteredEvents = events.filter(event => 
  // !event.agents.includes(user))

  filteredEvents.map(async (event) => {
    const agents = event.agents

    event.agents = await Promise.all(
      agents.map((id) => useAgents().getAgent(id))
    )
    return event
  })
    
  return filteredEvents
},

Here I actually achieve the wanted result for a short time, but then my app crashes with following errors.

Answer 1

If i didn't misunderstand you have a problem with async operation, forEach method should not use with async operations, I prefer you to use for .. of .. loop instead of it. It can be done with;

for (const event of filteredEvents) {
    for (let agent of event.agents) {
       const data = this.fetchAgentData(agent);
       agent = data;
    }
}

Answer 2

As per my understanding, You want to basically replace the agent id's with the whole agent object based on the id's. If Yes, There could be a two scenario :

1. If you want to replace all the id's with the respective objects on component load itself. Then you can fetch all the agents data in a single go with a single API and then replace the id's with the objects at client side. (Recommended) as it will improve the performance.
2. If you want to load the single agent data at a time. i.e. on some event against each id, then you can go for getting the single agent data.

Now, let's talk about the implementation (As per 1st scenario). You can achieve this requirement with the help of Array.map() along with the Array.find() method.

Live Demo :

new Vue({
  el: '#app',
  data: {
    filteredEvents: [
      { 
        agents: [1, 2, 3]
      }
    ]
  },
  mounted() {
    // I am just use mock response, You can replace it with actual API call.
    const apiResponse = [{
      id: 1,
      first_name: 'Agent 1'
    }, {
      id: 2,
      first_name: 'Agent 2'
    }, {
      id: 3,
      first_name: 'Agent 3'
    }, {
      id: 4,
      first_name: 'Agent 4'
    }, {
      id: 5,
      first_name: 'Agent 5'
    }];
    this.filteredEvents = this.filteredEvents.map(obj => {
      const agents = obj.agents;
      obj.agents = agents.map(agentId => {
        return apiResponse.find(({ id }) => id === agentId);
      });
      return obj;
    });
    console.log(this.filteredEvents);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(event, key) in filteredEvents" :key="key">
    <div v-for="agent in event.agents" :key="agent.id">
      <p>{{ agent.first_name }}</p>
    </div>
  </div>
</div>

Answer 3

From the comment you placed under Rohit's answer, I suspect you have a state management problem.

Here's how to solve it:

• if you don't already have one, create a store (I recommend pinia; you can also use vuex; below I'll use a plain reactive object, for brevity)
• place an empty agents array in store's state and create a getAgent action.
  The action takes an agent id as parameter and returns a promise, resolving the agent with that id.
  If the agent exists in state, it's returned from there. if not, it's fetched from server and also added to state, so it won't need fetching when/if it's requested again.

Proof of concept:

const store = reactive({
  agents: [],
  getAgent: (id) =>
    new Promise((resolve) => {
      const agent = store.agents.find(({ id: i }) => i === id);
      if (agent) {
        resolve(agent);
      } else {
        axios.get(`/api/get-specific-agent/${id}`).then(({ data }) => {
          store.agents.push(data);
          resolve(data);
        });
      }
    }),
});

export const useAgents = () => store;

Wherever you need to render agents:

import { useAgents } from "path/to/it";

// ...
const agents = await Promise.all(
  event.agents.map((id) => useAgents().getAgent(id))
);
// now use `agents` in <template>

---

Based on request in comment, here's how a vuex implementation would look like: https://codesandbox.io/s/eager-haze-xpldzp?file=/src/components/HelloWorld.vue.

---

Alternate solution: abstract away the loading into a dedicated component, featuring a slot, in which the agent object becomes available once loaded.

Note: this can also be done using a directive, but it's slightly more cumbersome. I find the slotted approach neat and flexible.

The difference between the two approaches is that in the first one the parent loads all agents and then renders them. In the second, each child is responsible for loading its own data and can exit loading phase as soon as its data is available, not depending on the other children.

Answer 4

Ok, so I'm not hugely knowledgeable on object orientated programming or asynchronous JavaScript and don't completely understand the context, but here's my take regardless.

You may need to do a bit of editing to get this working in your project, but the structure of each of the modified methods should work.

const obj = {
  filteredEvents: [
    {
      agents: ['id', 'id'],
      eventData: '',
    },
  ],

  async fetchAgentData(agentID) {
    const agent = await axios
      .get(`/api/get-specific-agent/${agentID}`)
      .then(response => response.data.abilities)
      .catch(error => console.log(error));

    return agent;
  },

  async otherAgentsEvents() {
    for (const event of this.filteredEvents) {
      event.agents = await Promise.all(
        event.agents.map(async agent => this.fetchAgentData(agent))
      );
    }

    return this.filteredEvents;
  },
};

Calling the otherAgentsEvents() method should return the object you want.

Tested this with the pokeapi (linked here) and it seemed to work fine.

I wont waste your time trying to explain what's going on under the hood here, but it at least works, so I hope this helps.