javascript - Add up total of array values multiplied by input value in react component -
i have react component pulled in json array includes input allows user select quantity of product. current issue need way multiply of product prices quantity , output them total. i've managed achieve each component need running total updates when quantity changed. difficulty here values in array not included may not classed peripheral.
being new react i'm hoping can suggest solution. advice appreciated.
my code stands below
import react, { component } "react"; import "./app.css"; import productdata "./catalog.json"; import productsort "./orderdetails"; class app extends component { constructor(props) { super(props); this.state = { bundleval: "", productcounter: [], totalcounter: [], peripheralcounter: 0, pricecounter: 0 }; } updatebundle = val => { this.setstate({ bundleval: val }); }; updatequantity = e => { var pcounter = this.state.productcounter; var el = parseint(e.target.id.split("_")[1], 10); pcounter[el] = parseint(e.target.value, 10); this.setstate({ productcounter: pcounter }); }; render() { const bundleproducts = [].concat(productsort).map((item, i) => <div key={item.id}> {item.id} <br /> {item.name} <br /> {item.description} <br /> installation: {item.price.installation} <br /> monthly: {item.price.recurring} <br /> <input type="number" onchange={this.updatequantity} value={this.state.productcounter[item.id] || 0} id={"product_" + item.id} /> <br /> {this.state.productcounter[item.id] || 0}<br /> installation total: £{parsefloat(this.state.productcounter[item.id] * item.price.installation, 10).tofixed(2)} <br /> monthly total: £{parsefloat(this.state.productcounter[item.id] * item.price.recurring, 10).tofixed(2)} <br /> <hr /> </div> ); this.state.peripheralcounter = this.state.productcounter .filter(function(qty, pid) { pid = string(pid); (var = 0; < productsort.length; i++) { var p = productsort[i]; if (p.isperipheral === true && p.id === pid) { return true; } } return false; }) .reduce(function(count, carry) { return count + carry; }, 0); let bname = null; let maxperipherals = null; if (this.state.bundleval === "1") { bname = productdata.data.bundles[0].name; maxperipherals = productdata.data.bundles[0].maximumperipherals; } else if (this.state.bundleval === "2") { bname = productdata.data.bundles[1].name; maxperipherals = productdata.data.bundles[1].maximumperipherals; } else if (this.state.bundleval === "3") { bname = productdata.data.bundles[2].name; maxperipherals = productdata.data.bundles[2].maximumperipherals; } else if (this.state.bundleval === "4") { bname = productdata.data.bundles[3].name; maxperipherals = productdata.data.bundles[3].maximumperipherals; } else { bname = null; } return ( <div> <h2>order</h2> chosen bundle: {bname} <br /> number of peripherals: {this.state.peripheralcounter} <br /> maximum number of peripherals: {maxperipherals} <br /> peripherals installation total: {} <br /> <bundle updatebundle={this.updatebundle} /> <h3>products</h3> {bundleproducts} </div> ); } } class bundle extends react.component { constructor(props) { super(props); this.state = { bundleval: "" }; } updatebundle = e => { this.props.updatebundle(e.target.value); this.setstate({ bundleval: e.target.value }); }; render() { return ( <div> <h4>bundle</h4> <input type="radio" value="1" onchange={this.updatebundle} checked={this.state.bundleval === "1"} /> {" "}indoor camera rapid <input type="radio" value="2" onchange={this.updatebundle} checked={this.state.bundleval === "2"} /> {" "}alarm rapid <input type="radio" value="3" onchange={this.updatebundle} checked={this.state.bundleval === "3"} /> {" "}outdoor camera rapid <input type="radio" value="4" onchange={this.updatebundle} checked={this.state.bundleval === "4"} /> {" "}build own bundle </div> ); } } class product extends react.component { constructor(props) { super(props); this.state = { productval: "" }; } updateproduct = e => { this.props.updateproduct(e.target.value); this.setstate({ productval: e.target.value }); }; render() { return ( <div> <h4>product</h4> <br /> <input type="number" onchange={this.updateproduct} /> </div> ); } } export default app; this code pulls in formula separate component
var productsort = productdata.data.products; productsort.sort(function(a, b){return a.id - b.id}); an example of json values follows
{ "timestamp": 1502121471, "data": { "adverts": [], "bundles": [{ "id": "1", "name": "bundle 1", "description": "bundle 1 description", "maximumperipherals": 32, "available": true, "count": 0, "price": { "installation": "99.99", "recurring": "23.99" }, "image": { "file": "bundle-one.png", }, "products": ["1", "2", "3"] }, { "id": "2", "name": "bundle 2", "description": "bundle 2 description", "maximumperipherals": 32, "available": true, "count": 0, "price": { "installation": "99.99", "recurring": "23.99" }, "image": { "file": "bundle-two.png", }, "products": ["1", "2", "2", "2", "2"] }], "products": [{ "id": "1", "name": "product 1", "description": "product 1 description", "maximumquantity": 1, "isperipheral": false, "isavailable": true, "price": { "upfront": null, "installation": "0.00", "recurring": "0.00" }, "image": { "file": "product-one.png", } }, { "id": "2", "name": "product 2", "description": "product 2 description", "maximumquantity": null, "isperipheral": true, "isavailable": true, "count": 0, "price": { "upfront": "60.00", "installation": "9.60", "recurring": "1.25" }, "image": { "file": "product-two.png", } }, { "id": "3", "name": "product three", "description": "product 3 description", "maximumquantity": null, "isperipheral": true, "isavailable": true, "count": 0, "price": { "upfront": "132.00", "installation": "9.60", "recurring": "2.75" }, "image": { "file": "product-three.png", } }] } }
it took bit of figuring have answer. it's loop iterates on array created bundleproducts , multiplies children inside props include installation cost , quantity input (in case 10 , 19 respectively). if has better solution please feel free post it.
var mytotal = 0; for(var = 0, len = bundleproducts.length; < len; i++) { mytotal += bundleproducts[i].props.children[19] * bundleproducts[i].props.children[10]; }
Comments
Post a Comment