如何在反应中推送 JSON 对象数组中的项目? [英] How to push items in JSON Object array in react?

问题描述

我有我的 REACT JS 客户端并使用 PHP API 来获取数据.我从 API 调用中获取 JSON 对象数组，格式如下:

I have my REACT JS client side and using PHP APIs to fetch data. Im fetching the JSON Object array from API call, in the following format:

{
    "records": {
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives"
            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives"
            }
        ],
        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions"
            }
        ],
        
         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            }
        ]
    }
}

从 API 响应中，我想将上述响应数据(NAME 和 PRICE)保存在 myrecords[] 的 this.state(最初为空)另外我还想向上面推送更多项目JSON，就像对于每个 SPAREPART 我想为每个数据添加数量"和总价格"项.

From API response, I want to save the above response data (NAME and PRICE) in this.state of myrecords[] (which is empty initially) Plus I also want to push some more items to this above JSON, like for each SPAREPART I want to add "Quantity" and "TotalPrice" items for each data.

我正在尝试使用 .push 方法添加这些 Quantity &每个数据项的总价格.这是我的 REACT API 调用，我在其中获取数据并通过 myrecords[] 的 setState 保存它，并在其中推送更多项目，但它不起作用并显示 ERROR msg.请帮助我如何正确推送项目.

Im trying to use .push method to add these Quantity & TotalPrice for each data item. here is my REACT API call where I m fetching data and saving it by setState of myrecords[] and pushing more items in it but IT DOESN'T WORK and shows ERROR msg. please HELP ME how to PUSH the items correctly.

axios.post('http://localhost/Auth/api/customers/show_cart.php', arr,
     {
    headers: {'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json'}
    } )
    .then(response => {
      console.log(response.data.records);

      let myItems = [];
    response.data.records.forEach((item) => {
      myItems.push({SparePartID: item.SparePartID,
         Name: item.Name,
         Price: item.Price,

         Quantity: 1,
         totalPrice: item.Price});
        })

      this.setState({
              myrecords: myItems
           })
        })
     .catch(error => {
     if (error) {
       console.log("REACT Error. Cannot show cart items");  }
       });

推荐答案

您可以将对象转换为数组并对其进行 foreach

You can convert your object to array and foreach it

let myItems = [];
let result = Object.entries(response.records).map(( [k, v] ) => ({ [k]: v }));
    result.forEach((item) => {
      var key = Object.keys(item)[0];
      item[key].forEach((sub)=>{
      myItems.push({SparePartID: sub.SparePartID,
         Name: sub.Name,
         Price: sub.Price,

         Quantity: 1,
         totalPrice: sub.Price});
        })
});

let response = {
    "records": {
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives"
            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives"
            }
        ],
        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions"
            }
        ],
        
         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives"
            }
        ]
    }
}

let myItems = [];
let result = Object.entries(response.records).map(( [k, v] ) => ({ [k]: v }));
    result.forEach((item) => {
      var key = Object.keys(item)[0];
      item[key].forEach((sub)=>{
      myItems.push({SparePartID: sub.SparePartID,
         Name: sub.Name,
         Price: sub.Price,

         Quantity: 1,
         totalPrice: sub.Price});
        })
});

        
        console.log(myItems);

这篇关于如何在反应中推送 JSON 对象数组中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！