vendredi 6 octobre 2017

Compare JSON values from separate arrays in ReactJS

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