Back

Technologies:

javascriptjavascript
vue.jsvue.js
avatar
Tolerim
a month ago

The mapping of the Vue 3 array response from API is not functioning and the foreach loop is not working.

Given an array response, I attempted to map and create another array but encountered issues with mapping and the forEach method. Please see the code below. While the console correctly displays the page_resp, the comps variable appears empty on the console. 


const page_resp = reactive({sections: [],});

fetch(APISettings.baseURL + "Page/getcontent?pageId=1", {method: "GET",headers: APISettings.headers,}).then((response) => response.json()).then((json) => (page_resp.sections = json.resultData?.sections));

console.log("pageresp:", pageresp);

const comps = ref([]);

page_resp.sections.forEach((comp) => {comps.value.push(comp);});

console.log("comps:", comps.value);
Screenshot of console output

Answers(2)
avatar
Vogi
a month ago
Verified Answer
Hello! It seems that you are trying to map and create another array from an array response but encountered issues with mapping and the forEach method. The console correctly displays the page_resp, but the comps variable appears empty on the console. It looks like you are using Vue.js's reactive and ref functions to create reactive objects and variables respectively. The issue with your code is that you are trying to push the components into the comps array using the forEach method before the fetch request has completed. This is because fetch is an asynchronous function and does not block the execution of the code. Therefore, when you try to push the components into the comps array, it is still empty. To fix this issue, you can use async/await to wait for the fetch request to complete before pushing the components into the comps array. Here is an example of how you can modify your code: 
const page_resp = reactive({sections: [],});

async function fetchData() {
  const response = await fetch(APISettings.baseURL + "Page/getcontent?pageId=1", {method: "GET",headers: APISettings.headers,});
  const json = await response.json();
  page_resp.sections = json.resultData?.sections;
  page_resp.sections.forEach((comp) => {comps.value.push(comp);});
}

fetchData();

console.log("page_resp:", page_resp);
console.log("comps:", comps.value);
This should fix your issue and allow you to push the components into the comps array after the fetch request has completed. I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
a month ago
It looks like the issue might be related to the reactivity of the page_resp object. Since the data is being fetched asynchronously, the map and forEach functions might be executed before the data is actually available. To resolve this, you can try wrapping the map and forEach functions inside a watch function that watches the page_resp object and triggers the mapping as soon as the data becomes available. Here's an example: 
const page_resp = reactive({ sections: [] });

fetch(APISettings.baseURL + "Page/getcontent?pageId=1", {
  method: "GET",
  headers: APISettings.headers,
})
  .then((response) => response.json())
  .then((json) => (page_resp.sections = json.resultData?.sections));

console.log("page_resp", page_resp);

const comps = ref([]);

watch(
  () => page_resp.sections,
  (sections) => {
    comps.value = sections.map((comp) => comp);
    sections.forEach((sec) => comps.value.push(sec));
  }
);

console.log("comps", comps.value);
In this example, we are using the watch function to watch the page_resp.sections property. As soon as this property changes (i.e., when the data is fetched), the mapping and pushing of components to the comps array will be triggered. Note that we are also updating the comps array inside the watch function instead of using the push method. This is because Vue's reactivity system might not pick up changes made to an array through its native methods.
;