Question

我在服务器端具有 REACT JS客户端和php API。我的API调用以以下格式获取 JSON 数据（我在 POSTMAN 上尝试过）：

{
    "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"
            }
        ]
    }
}

上面的代码就像一个数组，其中包含每个公司项目的数组。有些公司有 2个项目，有些有3个项目，有些只有1个项目。现在，我有了我的 REACT JS，我想调用php API并将其保存在JSON数据上方，格式是将每个公司的项目分别保存在单独的数组中（动态）。

我需要遍历上述JSON数据，并将其拆分为与存在的唯一公司一样多的数组。像上面的数据一样，有 3个不同的公司项目，所以我想将此JSON分为3个不同的数组，但是如果我有 15 个不同的公司，那么我想拆分并保存它 15个不同的数组。使用 AXIOS 进行REACT API调用的大致思路如下：

  axios.post('http://localhost/Auth/api/customers/show_cart.php', 
     {
    headers: {'Accept': 'application/json, text/plain, */*',
              'Content-Type': 'application/json'}
    } )
    .then(response => {

    //I need to know what to write here to save the data in my required format

      })
     .catch(error => {
     if (error) {
       console.log("REACT Error. Cannot show cart items");  }
       });

请我需要帮助，以动态将每个公司的项目（按公司名称分组）分别保存在单独的阵列中。 请帮助！

P.S。 mySQL Group BY查询在这里没有帮助。我只需要React API调用中的帮助。谢谢阅读。

编辑： 我想将数据存储在数组中（以公司名称命名）数组 Masterautomotives [] 之类的数据应在下面：

 [
                {
                    "SparePartID": "43",
                    "Name": "Oil and Lubricants",
                    "Price": "4500",
                    "VendorID": "48",
                    "CompanyName": "Master Automotives"
                },
                {
                    "SparePartID": "45",
                    "Name": "Lights",
                    "Price": "2300",
                    "VendorID": "48",
                    "CompanyName": "Master Automotives"
                }
  ]

并且数组 RepairSolutions [] 应该具有以下数据：

 [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions"
            }
  ]

对于从API调用中获取的其他公司，依此类推。

Answer 1

尝试以下代码，它将为您提供帮助

.then(response => {
    let companies = [];
    let companiesData = response.data.records;;
    for (let company in companiesData)
    {
      companies.push(companiesData[company])
    }
    console.log(companies); 
})

Answer 2

您打算如何处理这些数据？您是否将它们直接保存到州？基本上，您可以直接从API响应中以所需格式访问它，就像response.records的属性一样。我想不出需要将数组分别放入状态中的原因，因此将整个记录对象保存到状态，然后使用state.records [“ Company name”访问所需公司的数据可能更有意义。 ]，它将完全返回您要查找的数据结构。然后，您可以映射对象的键，然后依次包含在其中的每个数组以呈现按公司分组的所有产品。

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

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

然后您可以呈现每个公司零件的列表：

  render() {
    return (
      <div>
        {Object.keys(this.state.records).map((company, i) => (
        <div key={company}>
          <h2>{company}</h2>
          <ul>
           {this.state.records[company].map((product, i) => (
              <li>{product["Name"]} - ${product["Price"]}</li>
            ))}
          </ul>
        </div>
        ))}
      </div>
    )
  }
}

请参阅此Codepen。

如何在REACT JS API调用中迭代JSON嵌套数组？

2 个答案: