I have two different endpoints in the project I am working on. One of these endpoints (categories) gives me the category name and id value, and the other (products) gives me only the category id value. I want to extract the id values from both endpoints and add the name corresponding to the id value from the category part of the fields with equal id values to the product part.
I made synchronizations using the for loop below and then I synced it to the Category name of the product, but there was too much code and it doesn't work stably. By stable I mean the data sometimes comes and sometimes it doesn't, it doesn't give any error either. How do you think I can write shorter and more stable?
data:
products: {
items: [{ categoryName: '' }],
},
cretated(){
fetch('example/products')
.then((response) => {
return response.json();
})
.then((data) => {
this.products = data;
});
fetch('example/categories')
.then((response) => {
return response.json();
})
.then((data) => {
this.categories = data;
this.pushNametoCategoryNames();
});
}
methods() {
pushNametoCategoryNames() {
for (let i = 0; i < this.products.items.length; i++) {
for (let j = 0; j < this.categories.length; j++) {
console.log(this.products);
console.log(this.categories[j]);
if (this.products.items[i].categoryId == this.categories[j].id) {
this.products.items[i].categoryName = this.categories[j].name;
}
}
}
},
}
You can never guarantee that this.pushNametoCategoryNames() will run after both of the fetch calls, unless you call the second fetch from the then of first fetch, or use async-await.
fetch('example/products')
.then((response) => {
return response.json();
})
.then((data) => {
this.products = data;
fetch('example/categories')
.then((response) => {
return response.json();
})
.then((data) => {
this.categories = data;
this.pushNametoCategoryNames();
});
});
async cretated(){
this.products = await (await fetch('example/products')).json();
this.categories = await (await fetch('example/categories')).json();
this.pushNametoCategoryNames();
}
Promise.all)cretated(){
Promise.all([fetch('example/products'), fetch('example/categories')]).then(values => {
Promise.all([values[0].json(), values[1].json()]).then(data => {
this.products = data[0];
this.categories = data[1];
this.pushNametoCategoryNames();
});
});
this.pushNametoCategoryNames();
}
You can use map and wait for responses :
new Vue({
el: "#demo",
data() {
return {
products: [],
categories: []
}
},
async mounted(){
await fetch('https://jsonplaceholder.typicode.com/posts/')
.then((response) => {
return response.json();
})
.then((data) => {
this.products = data;
});
await fetch('https://jsonplaceholder.typicode.com/users/')
.then((response) => {
return response.json();
})
.then((data) => {
this.categories = data;
});
this.pushNametoCategoryNames();
},
methods: {
pushNametoCategoryNames() {
this.products = this.products.map(p => {
const cat = this.categories.find(c => p.userId === c.id).username
cat ? p.CATNAME = cat : p.CATNAME = 'EMPTY'
return { ...p }
})
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
{{products}}
</div>