object and nested object generate

Question

I have an automated generated object

this.state={
 fruits = []
}

Here is how I generate objects and insert to fruits

const gen = (fruitname, price) => {
     this.setState({
        this.state.fruits: {...this.state.fruits, [fruitname]: price}
    })
}

output is

{apple: "$2", banana: "$4", orange: "$6"}

Now I need to nest types in looks like below

   {apple: {
        "red": "$3",
        "Cripps": "$3",
        "Honeycrisp": "$5"
    }, 
    banana: {
        "small": "$4",
        "yellow": "$5",
        "green": "$2"
    },
    ...
   }

I updated code to

 const gen = (fruitname, price, types, eachPrice) => {
         this.setState({
            this.state.fruits: {...this.state.fruits, [fruitname]: { [types]: eachPrice} }
        })
    }

However, I only get one object of each fruit that each time I type

{apple: { "red": "$3", }, banana: { "small": "$4", }, ... }

How to keep all ?

what determines the price for each type? Your function only accepts one price, but your output has multiple different prices for each type — Nick Parsons
– Nick Parsons, Commented Feb 15, 2019 at 2:10
so would types be an array like ["red", "Cripps", "Honeycrisp"] and then eachPrice would also be an array which has the prices like ["$3", "$3", "$5"]? — Nick Parsons
– Nick Parsons, Commented Feb 15, 2019 at 2:13

Nick Parsons · Accepted Answer · 2019-02-15 02:48:28Z

1

If I understand correctly, you are trying to map an array of types (keys) to values (eachPrice) in an object. If this is the case you can use .reduce to achieve this. Here I am reducing the types array to an object, where each type is a key and each value is its corresponding price from the eachPrice array.

See example below:

let state = {}
const gen = (fruitname, types, eachPrice) => {
  state.fruit = {...state.fruit,
    [fruitname]: 
      types.reduce((acc, t, i) => (
        { ...acc, [t]: eachPrice[i]}
      ), {})
  }
}

gen("apple", ["red", "Cripps", "Honeycrisp"], ["$3", "$3", "$5"]);
gen("banana", ["small", "yellow", "green"], ["$4", "$5", "$2"]);
       
console.log(state.fruit);

Note that this function doesn't use the price argument as you have eachPrice to define the prices.

edited Feb 15, 2019 at 2:48

answered Feb 15, 2019 at 2:36

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Code Maniac · Accepted Answer · 2019-02-15 02:36:05Z

1

First clone the state.

check if it is already in state, if it's there than just adjust that particular key/value and manipulate if not than create a new one.

let state = {apple:{"red":"$3","Cripps":"$3","Honeycrisp":"$5"},banana:{"small":"$4","yellow":"$5","green":"$2"},}

function handleState(name,type,price){
  if(state[name]){
    let temp = {...state}
    temp[name][type] = price
    return {
      ...temp,
    }
  } else {
    return{
      ...state,
      [name]:{
        [type]: price
      }
    }
  }
}

console.log(handleState('apple','red','$20'))
console.log(handleState('test','red','$20'))

edited Feb 15, 2019 at 2:36

answered Feb 15, 2019 at 2:23

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Collectives™ on Stack Overflow

object and nested object generate

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related