Вывод данных словаря в компонент (React)

Question

Есть массив:

let data = [
    { "kat": "1", "fio": "Цех наладки", "tel": "2-00-01" },
    { "kat": "1", "fio": "Цех наладки", "tel": "2-00-02" },
    { "kat": "1", "fio": "Мастер участка", "tel": "3-00-01" },
    { "kat": "1", "fio": "Мастер участка", "tel": "3-00-02" },
];

Вот так я его группирую:

const res = JSON.stringify(
    data.reduce((r, a) => {
        r[a.fio] = r[a.fio] || [];
        r[a.fio].push({tel: a.tel, kat: a.kat});
        return r;
    }, {}), true, 4
)

Итог:

{
    "Цех наладки": [
        {
            "tel": "2-00-01",
            "kat": "1"
        },
        {
            "tel": "2-00-02",
            "kat": "1"
        }
    ],
    "Мастер участка": [
        {
            "tel": "3-00-01",
            "kat": "1"
        },
        {
            "tel": "3-00-02",
            "kat": "1"
        }
    ]
}

Вопрос: Как правильно перебрать объект, чтобы вывести данные в компонент по образцу ниже? Или (как я мне кажется) я изначально не правильно "собираю" const res?

Мастер участка
--------------
тел: 3-00-01
тел: 3-00-02


Цех наладки
--------------
2-00-01
2-00-01

Answer 1

Сначала надо получить массив ключей объекта Object.keys()

Потом перебрать этот массив, получая нужное значение по ключу

res[key]

let data = [
    { "kat": "1", "fio": "Цех наладки", "tel": "2-00-01" },
    { "kat": "1", "fio": "Цех наладки", "tel": "2-00-02" },
    { "kat": "1", "fio": "Мастер участка", "tel": "3-00-01" },
    { "kat": "1", "fio": "Мастер участка", "tel": "3-00-02" },
];

const res = data.reduce((r, a) => {
    r[a.fio] = r[a.fio] || [];
    r[a.fio].push({tel: a.tel, kat: a.kat});
    return r;
}, {});

Object.keys(res).forEach((key) => {
  console.log(key);
  console.log(res[key]);
});

БЛОГ НА HUSL

Вывод данных словаря в компонент (React)

Ответы (1 шт):