Как выполнить итерацию вложенного массива JSON в вызове REACT JS API?

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 разных массивов . Моя грубая идея вызова REACT API с использованием AXIOS приведена ниже:

  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. Спасибо за прочтение.

EDIT: Я хочу хранить данные в массивах (названных в названиях компаний) как массив 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"
                }
  ]

And Array RepairSolutions [] должны иметь следующие данные:

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

и т. Д. Для остальных Компаний, которые извлекаются из вызова API.

Answer 1

Что вы пытаетесь сделать с этими данными? Вы сохраняете их непосредственно в государство? По сути, у вас есть доступ к нему в нужном формате непосредственно из ответа API, так же как и свойства response.records. Я не могу придумать, для чего вам понадобятся массивы, отдельно помещенные в состояние, поэтому может иметь смысл просто сохранить весь объект записей в состоянии и затем получить доступ к данным нужной компании, используя state.records ["Название компании" ], которая вернет именно ту структуру данных, которую вы ищете. Затем вы можете отобразить ключи объекта и, в свою очередь, каждый массив, содержащийся внутри, чтобы отобразить все продукты, сгруппированные по компаниям.

  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 .

Answer 2

Попробуйте приведенный ниже код, он должен помочь вам

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