Динамически создавать радиолокационные карты в ReactJS

Question

У меня есть конечная точка, в которой я уже получаю свои данные правильно, мой вопрос связан с тем фактом, что мне нужно отформатировать свои данные, чтобы я мог отобразить их в радиолокационной карте.

Формат данных радаравыглядит так:

[ { rating: "rating_field", dataA: data_value, dataB: data_value }...];

Но мои данные структурированы так:

reviews: [ {average_rating: 6.3,safety_rating: 6.3,comfort_rating: 7.1 ...} ]

Итак, я подумал о том, чтобы сделать некоторые манипуляции с помощью forEachs и карт, чтобы я мог отформатировать эти данные ив итоге получится что-то вроде первого примера, чтобы было ясно, у меня есть массив обзоров, и каждый обзор будет рассматриваться как dataA или dataB (или C ...) в структуре данных радиолокационной карты.

Так, у кого-нибудь есть идея получше или я должен придерживаться forEachs и карт?

Answer 1

Вам не нужно forEach, когда вы уменьшаете, это делает ваш код более функциональным и неизменным

const api_data = {
  reviews: [
    {average_rating: 6.3,safety_rating: 6.3,comfort_rating: 7.1},
    {average_rating: 6.4,safety_rating: 6.4,comfort_rating: 7.2},
    {average_rating: 7.3,safety_rating: 7.3,comfort_rating: 8.1},
  ]
};

const letters = ["A", "B", "C", "D"];

const format_rating = (reviews) => (rating_name) =>
  reviews.reduce((acc, review, index) =>
    ({...acc,
     [`data${letters[index]}`]: review[rating_name]}),
    {rating: rating_name});

const ratings = ["average_rating", "safety_rating", "comfort_rating"];

const radar_data = ratings.map(format_rating(api_data.reviews));

console.log(radar_data);