Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как перебрать массив в json (https://javascript.ru/forum/dom-window/82589-kak-perebrat-massiv-v-json.html)

toyboy__37 28.05.2021 16:41

Как перебрать массив в json
 
Добрый день.
Подскажите, пожалуйста, как перебрать массив в json`e

Json:
{
"step4" : [
        {"url": "/wp-content/uploads/2021/05/communications1_min.jpg", "header": "Электрика", "list": ["Устройство электропроводки", "Электрошкаф", "Монтаж розеток и выключателей"]},
        {"url": "/wp-content/uploads/2021/05/communications2_min.jpg", "header": "Водоснабжение", "list": ["Разводка армированных труб для горячего и холодного водоснабжения", "Опрессовка системы для герметичности"]},
        {"url": "/wp-content/uploads/2021/05/communications3_min.jpg", "header": "Отопление", "list": ["Разводка армированных труб", "Опрессовка системы для герметичности"]},
        {"url": "/wp-content/uploads/2021/05/communications4_min.jpg", "header": "Канализация", "list": ["Разводка ПВХ труб внутренней канализации"]},
        {"url": "/wp-content/uploads/2021/05/communications5_min.jpg", "header": "Газовая котельная", "list": ["Настенный газовый котел", "Трубовпровод коаксильный", "Заправка теплоносителем", "Опрессовка системы"]},
        {"url": "/wp-content/uploads/2021/05/communications6_min.jpg", "header": "Электрокотельная", "list": ["Настенный электрический котел", "Бойлер косвенного нагрева", "Мембранный бак для водоснабжения", "Трехходовой смеситель", "Опрессовка системы"]}
    ]
}


С первым уровнем проблем нет, перебирают for in, но list выводится списком, как правильно написать условие, чтобы каждый элемент списка был отдельным элементом?

рони 28.05.2021 17:05

toyboy__37,
что на выходе?

toyboy__37 28.05.2021 17:15

Цитата:

Сообщение от рони (Сообщение 537286)
toyboy__37,
что на выходе?

На выходе дублирование всего контейнера под каждый элемент списка
Контейнер...Элемент списка1,
Контейнер...Элемент списка2, и так повторяется

А нужно Контейнер...Элемент списка1, Элемент списка2
for (let k in dataObject.step4) {

                for (let s in dataObject.step4[k].list) {
                    container.insertAdjacentHTML('afterbegin', '<img class="lazyload" width="162" height="147" style="object-fit: contain;" data-src="'+ dataObject.step4[k].url +'">' + '<strong>' + dataObject.step4[k].header + '</strong>' + dataObject.step4[k].list[s] +'');
                }
                
            }

рони 28.05.2021 17:22

toyboy__37,
:-?

рони 28.05.2021 17:27

toyboy__37,
что хотите получить на выходе?

рони 28.05.2021 17:33

:) код 2 строки, но партизаны молчат.

рони 28.05.2021 17:35

toyboy__37,
html хотя бы напишите для одной строки?

toyboy__37 28.05.2021 17:44

Получается на выходе
<div id="container2"><img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications6_min.jpg"
        src="/wp-content/uploads/2021/05/communications6_min.jpg"><strong>Электрокотельная</strong>Опрессовка
    системы<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications6_min.jpg"
        src="/wp-content/uploads/2021/05/communications6_min.jpg"><strong>Электрокотельная</strong>Трехходовой
    смеситель<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications6_min.jpg"
        src="/wp-content/uploads/2021/05/communications6_min.jpg"><strong>Электрокотельная</strong>Мембранный бак для
    водоснабжения<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications6_min.jpg"
        src="/wp-content/uploads/2021/05/communications6_min.jpg"><strong>Электрокотельная</strong>Бойлер косвенного
    нагрева<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications6_min.jpg"
        src="/wp-content/uploads/2021/05/communications6_min.jpg"><strong>Электрокотельная</strong>Настенный
    электрический котел<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications5_min.jpg"
        src="/wp-content/uploads/2021/05/communications5_min.jpg"><strong>Газовая котельная</strong>Опрессовка
    системы<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications5_min.jpg"
        src="/wp-content/uploads/2021/05/communications5_min.jpg"><strong>Газовая котельная</strong>Заправка
    теплоносителем<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications5_min.jpg"
        src="/wp-content/uploads/2021/05/communications5_min.jpg"><strong>Газовая котельная</strong>Трубовпровод
    коаксильный<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications5_min.jpg"
        src="/wp-content/uploads/2021/05/communications5_min.jpg"><strong>Газовая котельная</strong>Настенный газовый
    котел<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications4_min.jpg"
        src="/wp-content/uploads/2021/05/communications4_min.jpg"><strong>Канализация</strong>Разводка ПВХ труб
    внутренней канализации<img class=" lazyloaded" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications3_min.jpg"
        src="/wp-content/uploads/2021/05/communications3_min.jpg"><strong>Отопление</strong>Опрессовка системы для
    герметичности<img class="lazyload" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications3_min.jpg"><strong>Отопление</strong>Разводка армированных
    труб<img class="lazyload" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications2_min.jpg"><strong>Водоснабжение</strong>Опрессовка системы
    для герметичности<img class="lazyload" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications2_min.jpg"><strong>Водоснабжение</strong>Разводка
    армированных труб для горячего и холодного водоснабжения<img class="lazyload" width="162" height="147"
        style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications1_min.jpg"><strong>Электрика</strong>Монтаж розеток и
    выключателей<img class="lazyload" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications1_min.jpg"><strong>Электрика</strong>Электрошкаф<img
        class="lazyload" width="162" height="147" style="object-fit: contain;"
        data-src="/wp-content/uploads/2021/05/communications1_min.jpg"><strong>Электрика</strong>Устройство
    электропроводки

</div>

toyboy__37 28.05.2021 17:51

Чувствую я мудрю и тут надо сначала вставлять контейнер(insertAdjacentHTML) а потом отдельно перебирать массив и вставлять элементы(insertAdjacentHTML) в контейнер.

А в одну строчку не получится?

рони 28.05.2021 17:54

Цитата:

Сообщение от toyboy__37
Получается на выходе

??? получется ???

тогда в чём проблема???toyboy__37,
напишите что хотите получить, а не что получается.

можно одну строку
{"url": "/wp-content/uploads/2021/05/communications1_min.jpg", "header": "Электрика", "list": ["Устройство электропроводки", "Электрошкаф", "Монтаж розеток и выключателей"]},


какой html вам нужен из этой строки данных?


Часовой пояс GMT +3, время: 13:50.