I am receiving a JSON array called products. I am looping through it using ngFor.
*ngFor="let product of products"
each product also has an array in it, I am looping through that as follows
*ngFor="let item of product.Items"
I need to set a variable equal to product.items in ngOnInit. something like this:
this.items = product.Items
But I can't figure out how to properly access the child of the parent array (products) and assign the array in the child to a variable in ngOnInit.
If you are working in ngOnInit(), you are dealing with the page lifecycle, so your code is independent of the *ngFor interface loops that you already created.
If you want to do something with each item in each object, such as wrapping them in markup, you could do something like this:
products.map(product => {
product.items.map(item => "<p>" + item + "</p>")
return product;
});
This would give you your original products array, with each item in each array wrapped in some markup.
Basically, Array.map() is a built in function for arrays that allows you to run a callback on each item in the array.
By nesting one map inside of another, you can cleanly run code on all items in all products.
Here is the MDN documentation for Array.map().
Using the same logic, you could do more or less whatever you want to each item in each array using the Array.map function.
In non-ES6 formatting, it would look more like this:
products.map(function(product){
product.items.map(function(item){
/* You can do what you want with each item here */
return "<p>" + item + "</p>";
});
return product;
});
In the above example, I am simply wrapping an item in a <p> tag, but you could do more sophisticated processing to your items, with conditional logic, conversions, etc.
The only thing you need to do is to return something that will be the "new" version of that item.
this.products = products.map(product => { product.items.map(item => "<p>" + item + "</p>") this.items = product.items; }); The key being the this.products= part.Sounds like using a simple for loop in your ngOnInit function might solve your problem. Try something like this:
First create a variable to hold your array.
this.items = [];
Then iterate over your child array and push each item onto your new array:
ngOnInit() {
for (let i = 0; i < product.Items.length; i++) {
let currentItem = product.Items[i];
this.items.push(currentItem);
}
}
ngOnInit, correct?(item of product.items)although this works for looping through and getting the data. But I need to get to items array in a filter function. Thats why I want to set product.items = to a variable calleditems. So I can loop through it usingitem of itemsthis way I will have access to a variable called items in my filter function.