Я разрабатываю приложение и добавил в свой массив новые элементы: 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"]
Чтобы отобразить элементы как в таблице:
Как добавить и показать?
Обновлено: 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
Я добавил таблицу, чтобы вы могли ее визуализировать. Благодарить!
Я видел ваш вопрос об этих типах таблиц со вчерашнего дня. Вы разместили несколько вопросов с похожими вещами. Я предлагаю вам прочитать какую-нибудь статью и понять, как работают методы массива JS, вместо того, чтобы задавать дополнительные вопросы в SO. Запрос в SO может решить ваши проблемы на данный момент, но в конечном итоге вы будете страдать, поскольку вы, похоже, не понимаете, как эти вещи работают.
как получить item1 -> 202002 = 200?
@Д. Шах Исправил, спасибо!
Вы можете добавить описание и атрибут типа внутри метода сокращения следующим образом:
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 может решить ваши проблемы на данный момент, но в конечном итоге вы будете страдать, поскольку вы, похоже, не понимаете, как эти вещи работают.
Спасибо! Я учусь и усложняю массив, чтобы охватить все возможности. Я пробовал, что не все в том же вопросе, чтобы поддерживать порядок. Прошу прощения.
Еще один вопрос, я безуспешно пытался отобразить данные в таблице, подскажите как это сделать? Спасибо!
Без этой части кода нам трудно сказать вам, как это сделать.
Хорошо, я добавлю это в вопрос
Я добавил код, который использую для генерации таблицы, теперь мне нужно хорошо отобразить каждый из столбцов.
Это не работает («описание» не определено), вы можете проверить это. Спасибо!
Можете ли вы console.info items_dicc[item] ?
Я добавил вывод консоли к вопросу
Сработало получение столбцов description
и type
, но {dates.map((date) => <td>{items_dicc[item][date] || ''}</td>)}
по-прежнему показывает все данные: description
, type
и элементы для каждого периода.
То же самое с {dates.map(date => <th>{date}</th>)}
должно привести только названия дат
вы можете упростить свое решение следующим образом.
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);
Отлично, это еще один отличный способ сделать это. Как приятно учиться! Спасибо за вашу помощь!
пожалуйста. помните, что ваш код должен быть простым, иначе его будет сложно поддерживать.
Не совсем понятно, чего вы хотите добиться. Не могли бы вы включить пример того, как вы хотите, чтобы
items
выглядел в вашем вопросе?