I am working on a simple cart, for a homework project. I would like to ask, what would be the best way to take an item from array and increment its value by one? I have 25 items in the array, and each of them has unique name, so I am not using any IDs. Would it be possible to take these items by their name value?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/a2faab1b70.js" crossorigin="anonymous"></script>
<script src="database.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<title>Nákupný košík</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let sklad = localStorage.getItem('basket');
basket.push(JSON.parse(sklad));
class Basket extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: basket.length,
basket: basket
};
this.clearCart = () => {
basket = [];
localStorage.setItem("basket", JSON.stringify(basket));
this.setState(basket);
}}
addItem = (a) => { //Here is the problem, how can I increment value of a specific item?
this.setState({[a.target.name]: this.state.counter 1});
}
removeItem = (a) => { //Here is the problem, how can I decrement value of a specific item?
this.setState({[a.target.name]: this.state.counter - 1})
}
render() {
return <div>
{basket[0]?.map((items) =>
<div>
<div>{items.name}, {this.state.counter}x, Cena {items.price} <button onClick={this.addItem}> </button> <button onClick={this.removeItem}>-</button></div>
</div>
)}
<div id="counter">Počet položiek v košíku {basket[0]?.length this.state.counter -1}</div>
<button onClick={this.clearCart} >Vyprázdniť košík</button>
</div>
}
}
ReactDOM.render(
<Basket/>,
document.getElementById('root')
);
</script>
</body>
</html>
//Database with items
let basket = [];
let products = [
{
type: "mb",
name: "Asus Motherboard",
price: "320",
link: "products/asusmb.html",
image: "/Eshop_project/img/asusmb.jfif",
},
{
type: "cpu",
name: "Intel Core i3",
price: "150",
image: "../img/corei3.jfif",
},
{
type: "cpu",
name: "Intel Core i5",
price: "300",
image: "../img/corei5.jfif",
},
{
type: "cpu",
name: "Intel Core i7",
price: "450",
image: "../img/corei7.jfif",
},
{
type: "cpu",
name: "Intel Core i9",
price: "600",
image: "../img/corei9.jfif",
},
{
type: "ram",
name: "Corsair 16gb",
price: "80",
image: "../img/corsair16gb.jfif",
},
{
type: "psu",
name: "Corsair PSU",
price: "100",
image: "../img/corsairpsu.jfif",
},
{
type: "ram",
name: "Crucial 32gb",
price: "160",
image: "../img/crucial32gb.jfif",
},
{
type: "gpu",
name: "Nvidia Geforce RTX3070",
price: "750",
image: "../img/gforce 3070.jfif",
},
{
type: "gpu",
name: "Nvidia Geforce RTX 3080",
price: "950",
image: "../img/gforce_3080.jfif",
},
{
type: "gpu",
name: "Nvidia Geforce RTX 3090",
price: "1200",
image: "../img/gforce_3090.jfif",
},
{
type: "mb",
name: "Gigabyte Motherboard",
price: "400",
image: "../img/gigabytemb.jfif",
},
{
type: "psu",
name: "Gigabyte PSU",
price: "80",
image: "../img/gigabytepsu.jfif",
},
{
type: "ram",
name: "Kingston 16gb",
price: "90",
image: "../img/kingston16gb.jfif",
},
{
type: "mb",
name: "MSI Motherboard",
price: "300",
image: "../img/msimb.jfif",
},
{
type: "case",
name: "Phanteks Case",
price: "70",
image: "../img/Phaktekscase.jfif",
},
{
type: "gpu",
name: "AMD Radeon 6500",
price: "500",
image: "../img/radeon_6500.jfif",
},
{
type: "gpu",
name: "AMD Radeon 6800",
price: "650",
image: "../img/radeon_6800.jfif",
},
{
type: "gpu",
name: "AMD Radeon 6900",
price: "800",
image: "../img/radeon_6900.jfif",
},
{
type: "cpu",
name: "AMD Ryzen 3790",
price: "400",
image: "../img/ryzen3790.jfif",
},
{
type: "cpu",
name: "AMD Ryzen 5600",
price: "550",
image: "../img/ryzen5600.jfif",
},
{
type: "cpu",
name: "AMD Ryzen 5800",
price: "700",
image: "../img/ryzen5800.jfif",
},
{
type: "psu",
name: "Seasonic PSU",
price: "95",
image: "../img/seasonicpsu.jfif",
},
{
type: "case",
name: "Zalmancase",
price: "90",
image: "../img/zalmancase.jfif",
},
{
type: "psu",
name: "Evga PSU",
price: "80",
image: "../img/evgapsu.jfif",
}
]
localStorage.setItem('products', JSON.stringify(products));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>CodePudding user response：
You can use the uniq name like Id and do something like
const changeInArr = (name, newValue) => {
const newArr = yourArray.map(elem => {
if (name === item.name) {
item.value = newValue
}
return item
}
return newer
}
If you need change different field, you can use a key parameter like that :
const changeInArr = (name, newValue, key) => {
const newArr = yourArray.map(elem => {
if (name === item.name) {
item[key] = newValue
}
return item
}
return newer
}
Say me if work for you
CodePudding user response：
With the current structure, the only way is to use Array.map.
If you want to optimize it then you need to convert the array to the object.
const products = [
{
type: 'cpu',
name: 'AMD Ryzen 5800',
price: '700',
image: 'img/ryzen5800.jfif'
},
{
type: 'cpu',
name: 'AMD Ryzen 6000',
price: '800',
image: 'img/ryzen6000.jfif'
}
]
const productObj = products.reduce((obj, product) => {
return {
...obj,
[product.name]: product
}
}, {})
console.log(productObj)
console.log(productObj['AMD Ryzen 6000'])CodePudding user response：
It really depends on your coding style, and how its going to self-document.
You can use map:
const products=[{type:"mb",name:"Asus Motherboard",price:"320",link:"products/asusmb.html",image:"/Eshop_project/img/asusmb.jfif"},{type:"cpu",name:"Intel Core i3",price:"150",image:"../img/corei3.jfif"},{type:"cpu",name:"Intel Core i5",price:"300",image:"../img/corei5.jfif"},{type:"cpu",name:"Intel Core i7",price:"450",image:"../img/corei7.jfif"},{type:"cpu",name:"Intel Core i9",price:"600",image:"../img/corei9.jfif"},{type:"ram",name:"Corsair 16gb",price:"80",image:"../img/corsair16gb.jfif"},{type:"psu",name:"Corsair PSU",price:"100",image:"../img/corsairpsu.jfif"},{type:"ram",name:"Crucial 32gb",price:"160",image:"../img/crucial32gb.jfif"},{type:"gpu",name:"Nvidia Geforce RTX3070",price:"750",image:"../img/gforce 3070.jfif"},{type:"gpu",name:"Nvidia Geforce RTX 3080",price:"950",image:"../img/gforce_3080.jfif"},{type:"gpu",name:"Nvidia Geforce RTX 3090",price:"1200",image:"../img/gforce_3090.jfif"},{type:"mb",name:"Gigabyte Motherboard",price:"400",image:"../img/gigabytemb.jfif"},{type:"psu",name:"Gigabyte PSU",price:"80",image:"../img/gigabytepsu.jfif"},{type:"ram",name:"Kingston 16gb",price:"90",image:"../img/kingston16gb.jfif"},{type:"mb",name:"MSI Motherboard",price:"300",image:"../img/msimb.jfif"},{type:"case",name:"Phanteks Case",price:"70",image:"../img/Phaktekscase.jfif"},{type:"gpu",name:"AMD Radeon 6500",price:"500",image:"../img/radeon_6500.jfif"},{type:"gpu",name:"AMD Radeon 6800",price:"650",image:"../img/radeon_6800.jfif"},{type:"gpu",name:"AMD Radeon 6900",price:"800",image:"../img/radeon_6900.jfif"},{type:"cpu",name:"AMD Ryzen 3790",price:"400",image:"../img/ryzen3790.jfif"},{type:"cpu",name:"AMD Ryzen 5600",price:"550",image:"../img/ryzen5600.jfif"},{type:"cpu",name:"AMD Ryzen 5800",price:"700",image:"../img/ryzen5800.jfif"},{type:"psu",name:"Seasonic PSU",price:"95",image:"../img/seasonicpsu.jfif"},{type:"case",name:"Zalmancase",price:"90",image:"../img/zalmancase.jfif"},{type:"psu",name:"Evga PSU",price:"80",image:"../img/evgapsu.jfif"}];
const search = 'Corsair 16gb';
// Iterate over the objects and return each in its initial
// state except the one that you increase the price for
const newProducts = products.map(product => {
if (product.name === search) product.price;
return product;
});
console.log(newProducts);Or maybe find the object, increase the price, filter the array to remove that object, and then create an updated array from the filtered array, and the new updated object.
const products=[{type:"mb",name:"Asus Motherboard",price:"320",link:"products/asusmb.html",image:"/Eshop_project/img/asusmb.jfif"},{type:"cpu",name:"Intel Core i3",price:"150",image:"../img/corei3.jfif"},{type:"cpu",name:"Intel Core i5",price:"300",image:"../img/corei5.jfif"},{type:"cpu",name:"Intel Core i7",price:"450",image:"../img/corei7.jfif"},{type:"cpu",name:"Intel Core i9",price:"600",image:"../img/corei9.jfif"},{type:"ram",name:"Corsair 16gb",price:"80",image:"../img/corsair16gb.jfif"},{type:"psu",name:"Corsair PSU",price:"100",image:"../img/corsairpsu.jfif"},{type:"ram",name:"Crucial 32gb",price:"160",image:"../img/crucial32gb.jfif"},{type:"gpu",name:"Nvidia Geforce RTX3070",price:"750",image:"../img/gforce 3070.jfif"},{type:"gpu",name:"Nvidia Geforce RTX 3080",price:"950",image:"../img/gforce_3080.jfif"},{type:"gpu",name:"Nvidia Geforce RTX 3090",price:"1200",image:"../img/gforce_3090.jfif"},{type:"mb",name:"Gigabyte Motherboard",price:"400",image:"../img/gigabytemb.jfif"},{type:"psu",name:"Gigabyte PSU",price:"80",image:"../img/gigabytepsu.jfif"},{type:"ram",name:"Kingston 16gb",price:"90",image:"../img/kingston16gb.jfif"},{type:"mb",name:"MSI Motherboard",price:"300",image:"../img/msimb.jfif"},{type:"case",name:"Phanteks Case",price:"70",image:"../img/Phaktekscase.jfif"},{type:"gpu",name:"AMD Radeon 6500",price:"500",image:"../img/radeon_6500.jfif"},{type:"gpu",name:"AMD Radeon 6800",price:"650",image:"../img/radeon_6800.jfif"},{type:"gpu",name:"AMD Radeon 6900",price:"800",image:"../img/radeon_6900.jfif"},{type:"cpu",name:"AMD Ryzen 3790",price:"400",image:"../img/ryzen3790.jfif"},{type:"cpu",name:"AMD Ryzen 5600",price:"550",image:"../img/ryzen5600.jfif"},{type:"cpu",name:"AMD Ryzen 5800",price:"700",image:"../img/ryzen5800.jfif"},{type:"psu",name:"Seasonic PSU",price:"95",image:"../img/seasonicpsu.jfif"},{type:"case",name:"Zalmancase",price:"90",image:"../img/zalmancase.jfif"},{type:"psu",name:"Evga PSU",price:"80",image:"../img/evgapsu.jfif"}];
const search = 'Corsair 16gb';
// Find the product
const product = products.find(product => product.name === search);
// Increase the price
product.price;
// Filter out the object from the array
const filtered = products.filter(product => product.name !== search);
// Create a new array from the filtered array,
// and the updated object.
const newProducts = [...filtered, product ];
console.log(newProducts);Both these methods produce new arrays. You could also use forEach which operates on each array element in place (and doesn't return a new array) but because this is React I wouldn't recommend it in this instance.