Destructuring object properties from an array of objects and rendering those properties into an array

Question

I currently have two objects (it's a lot but this is what I want to draw your attention to.) As you can see, this is an array of objects. What I want to do is to pull out specified properties of each object and store that in an array. So for example I would want object property Price, I'd like to get each Price property of the object and store all of it in an array that would only contain it's value like in this case : [215.23,215.23]

 [{
        CompanyName: "Microsoft Corp.",
        Date: 1606503905,
        Price: 215.23,
        Quantity: 50,
        Symbol: "MSFT",
        TotalCost: 10761.5
      },
      {
        CompanyName: "Microsoft Corp.",
        Date: 1606503913,
        Price: 215.23,
        Quantity: 25,
        Symbol: "MSFT",
        TotalCost: 5380.75
      }
    ]

Here's a snippet:

function RadialChart(props) {
    const { transactionData } = props; //Array of objects stored here
    transactionData.map((data) => {console.log(data.TotalCost)})

I tried using useState and the map method but I don't think I was doing it right. When I was using map, I declared a const arr= [] then did an arr.concat(data.TotalCost) and that didn't work. Please let me know if you guys have a solution. Thank you.

const RadialChart = propName => transactionData.map(o => o[propName])? Which would return array of Price values on RadialChart('Price') — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Nov 27, 2020 at 23:52
and, by the way, get your input data fixed (missing commas aren't cool - the input is not suitable to play with) — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Nov 27, 2020 at 23:54

Aplet123 · Accepted Answer · 2020-11-27 23:45:22Z

3

If you want just an array of prices, then just map it and return the price:

const prices = transactionData.map((data) => data.Price);
console.log(prices); // [215.23, 215.23]

answered Nov 27, 2020 at 23:45

Aplet123

35.8k1 gold badge41 silver badges66 bronze badges

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

1 Comment

Pacholoamit Over a year ago

Jesus Christ, I can't believe I missed it. I was doing all this crazy stuff with useState, useEffect and spread operators that it was this simple. Thanks for pointing that out, the mental exhaustion is taking it's toll.

Someone Special · Accepted Answer · 2020-11-27 23:47:26Z

You can get what you want simply with map.

const myArray =  [{
        CompanyName: "Microsoft Corp.",
        Date: 1606503905,
        Price: 215.23,
        Quantity: 50,
        Symbol: "MSFT",
        TotalCost: 10761.5,
      },
      {
        CompanyName: "Microsoft Corp.",
        Date: 1606503913,
        Price: 215.23,
        Quantity: 25,
        Symbol: "MSFT",
        TotalCost: 5380.75,
      }
    ]
    
    
  console.log('CompanyName', myArray.map(x => x.CompanyName))
  console.log('Date', myArray.map(x => x.Date))
    console.log('Price', myArray.map(x => x.Price))
  console.log('TotalCost', myArray.map(x => x.TotalCost))

If you want to set it to state...

declare useState

const [ price, setPrice ] = useState([]);

setPrice

setPrice(myArray.map( x => x.Price ))

Siva Kondapi Venkata · Accepted Answer · 2020-11-28 12:57:33Z

0

Use destructuring and map to get the prices. (Just adding destructuring to @Aplet123's suggestion)

const data = [
  {
    CompanyName: "Microsoft Corp.",
    Date: 1606503905,
    Price: 215.23,
    Quantity: 50,
    Symbol: "MSFT",
    TotalCost: 10761.5,
  },
  {
    CompanyName: "Microsoft Corp.",
    Date: 1606503913,
    Price: 123.23,
    Quantity: 25,
    Symbol: "MSFT",
    TotalCost: 5380.75,
  },
];

const prices = data.map(({ Price }) => Price);
console.log(prices);

answered Nov 28, 2020 at 12:57

Siva Kondapi Venkata

11.1k2 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

Destructuring object properties from an array of objects and rendering those properties into an array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related