從對象數組中解構 object 屬性並將這些屬性渲染到數組中

Question

我目前有兩個對象（很多，但這是我想提請您注意的。）如您所見，這是一個對象數組。 我想要做的是提取每個 object 的指定屬性並將其存儲在一個數組中。 因此，例如，我想要 object 屬性Price ，我想獲取 object 的每個Price屬性並將其全部存儲在一個僅包含它的值的數組中，例如在這種情況下： [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
      }
    ]

這是一個片段：

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

我嘗試使用 useState 和 map 方法，但我認為我做得不對。 當我使用 map 時，我聲明了一個const arr= []然后做了一個arr.concat(data.TotalCost)並且沒有用。 如果你們有解決方案，請告訴我。 謝謝你。

Answer 1

如果您只想要一組價格，那么只需map它並返回價格：

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

Answer 2

您只需使用 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))

如果要將其設置為 state...

聲明使用狀態

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

設置價格

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

Answer 3

使用解構和 map 來獲取價格。 （只是在@Aplet123 的建議中添加解構）

 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);