I'm attempting to construct a system in react which will enable me to render a list of products from a JSON file and (based on the information in within the JSON) compare different arrays and assign a minimum product quantity based on which products are included in different packages (known in the JSON as "Bundles"). The user will be able to select a bundle and see which products are included and this needs to be dynamic as the JSON could change over time.
The JSON information is as follows:
{
"data": {
"adverts": [],
"bundles": [{
"id": "1",
"name": "Bronze Bundle",
"price": {
"installation": "99.99",
"recurring": "23.99"
},
"products": ["1", "2", "3", "4", "9", "10", "15", "15"]
}, {
"id": "2",
"name": "Silver Bundle",
"price": {
"installation": "99.99",
"recurring": "23.99"
},
"products": ["1", "2", "2", "2", "2", "4", "9", "10", "15", "15"]
}, {
"id": "3",
"name": "Gold Bundle",
"price": {
"installation": "99.99",
"recurring": "25.99"
},
"products": ["1", "2", "4", "5", "9", "10", "15", "15"]
}, {
"id": "4",
"name": "Build Your Own Bundle",
"price": {
"installation": "49.99",
"recurring": "9.99"
},
"products": ["1", "10"]
}],
"products": [{
"id": "1",
"name": "Product 1",
"price": {
"upfront": null,
"installation": "0.00",
"recurring": "0.00"
}
}, {
"id": "3",
"name": "Product 3",
"price": {
"upfront": "132.00",
"installation": "9.60",
"recurring": "2.75"
}
}, {
"id": "4",
"name": "Product 4",
"price": {
"upfront": "60.00",
"installation": "9.60",
"recurring": "1.25"
}
}, {
"id": "2",
"name": "Product 2",
"price": {
"upfront": "60.00",
"installation": "9.60",
"recurring": "1.25"
}
},{
"id": "5",
"name": "Product 5",
"price": {
"upfront": "228.00",
"installation": "9.60",
"recurring": "4.75"
}
}, {
"id": "6",
"name": "Product 6",
"price": {
"upfront": "96.00",
"installation": "9.60",
"recurring": "2.00"
}
}]
}
}
Essentially what I'd like to happen is to compare the "Bundle" Array with the "Products" array and assign a minimum value to the product based on a count of the products included.
I'm importing the Json into react using:
import productdata from "./catalog.json";
I've passed the information from "bundles" out into two arrays, one showing a list of the products included and the second showing a count of the products. The code for this is as follows:
function foo(arr) {
var a = [], b = [], prev;
arr.sort();
for ( var i = 0; i < arr.length; i++ ) {
if ( arr[i] !== prev ) {
a.push(arr[i]);
b.push(1);
} else {
b[b.length-1]++;
}
prev = arr[i];
}
return {pincluded: [a],
qincluded: [b]
};
}
and the current code I have for trying to compare the arrays and assign minimum values to the relevent products (this occurs in a separate react component so they have been passed using props pincluded = passedProducts and qincluded = passedQuantity):
var result = [];
var productList = productdata.data.products;
for (var j = 0; j < productList.length; j++){
var productList = this.props.passedProducts;
if (this.props.passedProducts == undefined){
productList = [];
}
var sortproducts = 0;
for (var i = 0; i < productList.length; i++) {
if (this.props.passedProducts[i] == 2){
sortproducts = this.props.passedQuantity;
}
}
result = [productdata.data.products][j], [sortproducts];
console.log(result)
}
I can render a list of products in the console log but I need to be able to view it in react and assign a number of products to each line of products individually based on the number included in bundle.
If anyone could offer some advice on this I would really appreciate it.
Aucun commentaire:
Enregistrer un commentaire