javascript - How do i iterate over an array of object in react.js and add the values of prices in the object as shown below - St

admin管理员组

文章数量:1406177

const data = [
    {
        id: 1,
        title: "buttermilk pancakes",
        category: "fullstack",
        price: 15.99,
        img: "./img/item-1.jpeg",
        desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
    },
    {
        id: 2,
        title: "diner double",
        category: "backend",
        price: 13.99,
        img: "./img/item-2.jpeg",
        desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
    },
];

export default data;

Here i looped through the object using map but the returned result displays the iterated price sums. I also used the JavaScript function reduce and that did not work either.

const Test = () => {
    let sum = 0;
    return (
        <div>
            {data.map((items) => {
                const values = items.price;
                sum = values + sum;
                console.log(Math.max(sum));
                const { id } = items;
                return (
                    <div key={id}>
                        <p>{sum}</p>
                    </div>
                );
            })}
        </div>
    );
};

How do I get the total value of the price using react?

const data = [
    {
        id: 1,
        title: "buttermilk pancakes",
        category: "fullstack",
        price: 15.99,
        img: "./img/item-1.jpeg",
        desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
    },
    {
        id: 2,
        title: "diner double",
        category: "backend",
        price: 13.99,
        img: "./img/item-2.jpeg",
        desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
    },
];

export default data;

Here i looped through the object using map but the returned result displays the iterated price sums. I also used the JavaScript function reduce and that did not work either.

const Test = () => {
    let sum = 0;
    return (
        <div>
            {data.map((items) => {
                const values = items.price;
                sum = values + sum;
                console.log(Math.max(sum));
                const { id } = items;
                return (
                    <div key={id}>
                        <p>{sum}</p>
                    </div>
                );
            })}
        </div>
    );
};

How do I get the total value of the price using react?

• javascript
• reactjs
• jsx

Share Improve this question Follow edited Dec 26, 2021 at 2:13 Filip Seman 1,80422 gold badges2222 silver badges2929 bronze badges asked Dec 25, 2021 at 13:23 Brown Brown 7355 bronze badges 1

• Create a function which return the sum and call that function in code. – amardeep saini Commented Dec 25, 2021 at 13:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can use reduce function to achieve this

data.reduce((sum, p)=> sum+p.price, 0);

You can use it inside your ponent

const Test = ()=> {
    return <div>{data.reduce((sum, p)=> sum+p.price, 0);}</div>
 }

You can simply achieve the calculation of total price using forEach instead of map (as map has its own use case like creating new array, and forEach is available for us just for this simple iteration like in your use case) with a one-liner like:

const data = [{
    id: 1,
    title: 'buttermilk pancakes',
    category: 'fullstack',
    price: 15.99,
    img: './img/item-1.jpeg',
    desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
  },
  {
    id: 2,
    title: 'diner double',
    category: 'backend',
    price: 13.99,
    img: './img/item-2.jpeg',
    desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
  }
];

var sum = 0;
data.forEach(subData => sum += subData.price);
console.log(sum) // return this `sum` value alone in your div tag below.

//return <div>{sum}</div>

Please refer this code, it may help your code

const Test = () => {
    let sum = 0;
    data.forEach((item) => {
     sum = sum + item.price;
    });

    return(
     <div> {sum} </div>
    )
}

const Test = ()=> {
    var prices = data.map(({price})=> price).reduce((a, b)=> a+b, 0);
    return(
     <div>
         {prices}
     </div>
    )
 }

thank you everyone, I also tried this and it worked.

本文标签：