如何在反应中推送 JSON 对象数组中的项目？

Posted 2023-02-22

【中文标题】如何在反应中推送 JSON 对象数组中的项目？

【英文标题】：How to push items in JSON Object array in react?

【发布时间】：2019-09-21 13:27:19

【问题描述】：

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

    "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 响应中，我想将上述响应数据（名称和价格）保存在

myrecords[]

的 this.state 中（最初为空）另外我还想将更多项目推送到上面JSON，就像对于每个

SPAREPART

我想为每个数据添加“

Quantity

”和“

TotalPrice

”项目。

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

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

【参考方案1】：

你可以将你的对象转换成数组并foreach它

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

【讨论】：

它工作正常。但是对于每个供应商分别处理 SpareParts，我想要 JSON 对象格式的数据。那么如何将这个 array 转换回我的 JSON Object 格式？或者有什么方法可以推送项目而不将其转换为数组？

你仍然保留旧对象，推送方法仅用于数组

好的，但是现在当我 console.log(myItems) 它显示一个数组而不是对象。

你想要什么对象格式？你可以使用 myItems[0] 作为对象吗？

我想要我在问题一开始提到的对象格式。就像所有项目都按其供应商分组一样。