Уменьшите его массив до более простого способа сопоставления

Я разрабатываю приложение и добавил в свой массив новые элементы: type и description.

array = [
  {
    "id": 1,
    "description": "item1",
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 100
    },
    {
    "id": 2,
    "description": "item1",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 200
  },
  {
    "id": 3,
    "description": "item1",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "type": {
      "id": 2,
      "name": "type2"
    },
    "price": 300
  },
]

Ранее я сделал это, чтобы упростить его отображение:

 items = array.reduce((acc, e) => {
    if (!acc[e["item"]["name"]]) {
      acc[e["item"]["name"]] = {
        [e["date"]["name"]]: e["price"]
      }
    } else {
      acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
    }
    return acc
  }, {})

Чтобы показать данные, прежде чем я сделал

const dates = [...new Set(Object.keys(items_dicc).map(i => Object.keys(items_dicc[i])).flat())]

{
  Object.keys(items_dicc).map((item) => {
    return (
      <tr>
       <td>{item}</td>
       {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
      </tr>
    )
  })
}

Мне нужно добавить элемент description и type.name к приведенному выше. Например, для description:

description: e["description"]

Чтобы отобразить элементы как в таблице:

ЭЛЕМЕНТ ОПИСАНИЕ ТИП 202001 202002 I1 пункт1 Тип 1 100 200 I2 пункт3 тип2 - 300

Как добавить и показать?

Обновлено: console.info(items_dicc[item])

{202001: 100, 202002: 200, description: "item1", type: "type1"}
202001: 100
202002: 200
description: "item1"
type: "type1"
__proto__: Object

{202002: 300, description: "item3", type: "type2"}
202002: 300
description: "item3"
type: "type2"
__proto__: Object

Не совсем понятно, чего вы хотите добиться. Не могли бы вы включить пример того, как вы хотите, чтобы items выглядел в вашем вопросе?

Tholle 22.12.2020 06:45

Я добавил таблицу, чтобы вы могли ее визуализировать. Благодарить!

bonnegnu 22.12.2020 06:54

Я видел ваш вопрос об этих типах таблиц со вчерашнего дня. Вы разместили несколько вопросов с похожими вещами. Я предлагаю вам прочитать какую-нибудь статью и понять, как работают методы массива JS, вместо того, чтобы задавать дополнительные вопросы в SO. Запрос в SO может решить ваши проблемы на данный момент, но в конечном итоге вы будете страдать, поскольку вы, похоже, не понимаете, как эти вещи работают.

Md Sabbir Alam 22.12.2020 07:05

как получить item1 -> 202002 = 200?

D. Seah 22.12.2020 07:07

@Д. Шах Исправил, спасибо!

bonnegnu 22.12.2020 07:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
84
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете добавить описание и атрибут типа внутри метода сокращения следующим образом:

array = [
  {
    "id": 1,
    "description": "item1",
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 100
    },
    {
    "id": 2,
    "description": "item2",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 200
  },
  {
    "id": 3,
    "description": "item3",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "type": {
      "id": 2,
      "name": "type2"
    },
    "price": 300
  },
]


items = array.reduce((acc, e) => {
    if (!acc[e["item"]["name"]]) {
      acc[e["item"]["name"]] = {
        [e["date"]["name"]]: e["price"],
        'description': e['description'],
        'type': e.type?.name,
      }
    } else {
      acc[e["item"]["name"]][e["date"]["name"]] = e["price"]
    }
    return acc
  }, {})

console.info(items);

Чтобы добавить описание и имя в таблицу,

const dates = [...new Set(Object.keys(items_dicc).map(i => Object.keys(items_dicc[i])).flat())]

{
  Object.keys(items_dicc).map((item) => {
    return (
      <tr>
       <td>{item}</td>
       <td>{items_dicc[item]?.description}</td>
       <td>{items_dicc[item]?.type}</td>
       {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
      </tr>
    )
  })
}

Я видел ваш вопрос об этих типах таблиц со вчерашнего дня. Вы разместили несколько вопросов с похожими вещами. Я предлагаю вам прочитать статью и понять, как работают методы JS array, вместо того, чтобы задавать дополнительные вопросы в SO. Запрос в SO может решить ваши проблемы на данный момент, но в конечном итоге вы будете страдать, поскольку вы, похоже, не понимаете, как эти вещи работают.

Спасибо! Я учусь и усложняю массив, чтобы охватить все возможности. Я пробовал, что не все в том же вопросе, чтобы поддерживать порядок. Прошу прощения.

bonnegnu 22.12.2020 07:06

Еще один вопрос, я безуспешно пытался отобразить данные в таблице, подскажите как это сделать? Спасибо!

bonnegnu 22.12.2020 08:30

Без этой части кода нам трудно сказать вам, как это сделать.

Md Sabbir Alam 22.12.2020 08:36

Хорошо, я добавлю это в вопрос

bonnegnu 22.12.2020 08:38

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

bonnegnu 22.12.2020 08:46

Это не работает («описание» не определено), вы можете проверить это. Спасибо!

bonnegnu 22.12.2020 09:24

Можете ли вы console.info items_dicc[item] ?

Md Sabbir Alam 22.12.2020 09:26

Я добавил вывод консоли к вопросу

bonnegnu 22.12.2020 09:38

Сработало получение столбцов description и type, но {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)} по-прежнему показывает все данные: description, type и элементы для каждого периода.

bonnegnu 22.12.2020 09:46

То же самое с {dates.map(date => <th>{date}</th>)} должно привести только названия дат

bonnegnu 22.12.2020 09:55

вы можете упростить свое решение следующим образом.

const array = [{
    "id": 1,
    "description": "item1",
    "date": {
      "id": 1,
      "name": "202001"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 100
  },
  {
    "id": 2,
    "description": "item2",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 1,
      "name": "I1"
    },
    "type": {
      "id": 1,
      "name": "type1"
    },
    "price": 200
  },
  {
    "id": 3,
    "description": "item3",
    "date": {
      "id": 2,
      "name": "202002"
    },
    "item": {
      "id": 2,
      "name": "I2"
    },
    "type": {
      "id": 2,
      "name": "type2"
    },
    "price": 300
  }
]

const result = array.map(item => {
    return Object.keys(item).reduce((a, c) => {
        if (c === "date") {
            a[item[c].name] = item.price; 
        } else if (c !== "price" && c !== "id") {
            a[c] = (typeof item[c] === "object") ? item[c].name : item[c];
        }
        return a;
    }, {})
});

console.info(result);

Отлично, это еще один отличный способ сделать это. Как приятно учиться! Спасибо за вашу помощь!

bonnegnu 22.12.2020 07:24

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

D. Seah 22.12.2020 07:26

Другие вопросы по теме