Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.05.2021, 16:41
Интересующийся
Отправить личное сообщение для toyboy__37 Посмотреть профиль Найти все сообщения от toyboy__37
 
Регистрация: 25.01.2016
Сообщений: 15

Как перебрать массив в 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 выводится списком, как правильно написать условие, чтобы каждый элемент списка был отдельным элементом?
Ответить с цитированием
  #2 (permalink)  
Старый 28.05.2021, 17:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

toyboy__37,
что на выходе?
Ответить с цитированием
  #3 (permalink)  
Старый 28.05.2021, 17:15
Интересующийся
Отправить личное сообщение для toyboy__37 Посмотреть профиль Найти все сообщения от toyboy__37
 
Регистрация: 25.01.2016
Сообщений: 15

Сообщение от рони Посмотреть сообщение
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] +'');
                }
                
            }
Ответить с цитированием
  #4 (permalink)  
Старый 28.05.2021, 17:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

toyboy__37,
Ответить с цитированием
  #5 (permalink)  
Старый 28.05.2021, 17:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

toyboy__37,
что хотите получить на выходе?
Ответить с цитированием
  #6 (permalink)  
Старый 28.05.2021, 17:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

код 2 строки, но партизаны молчат.
Ответить с цитированием
  #7 (permalink)  
Старый 28.05.2021, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

toyboy__37,
html хотя бы напишите для одной строки?
Ответить с цитированием
  #8 (permalink)  
Старый 28.05.2021, 17:44
Интересующийся
Отправить личное сообщение для toyboy__37 Посмотреть профиль Найти все сообщения от toyboy__37
 
Регистрация: 25.01.2016
Сообщений: 15

Получается на выходе
<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:45. Причина: Отформатировал html
Ответить с цитированием
  #9 (permalink)  
Старый 28.05.2021, 17:51
Интересующийся
Отправить личное сообщение для toyboy__37 Посмотреть профиль Найти все сообщения от toyboy__37
 
Регистрация: 25.01.2016
Сообщений: 15

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

А в одну строчку не получится?
Ответить с цитированием
  #10 (permalink)  
Старый 28.05.2021, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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

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

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Json и как его правильно кушать (Help plz!) JohnyVoo Angular.js 2 04.05.2016 19:55
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как получить javasript массив из php? dima_tr AJAX и COMET 6 01.02.2013 03:37
Как достать данные из JSON массива? Dimaz jQuery 15 27.11.2012 21:58
Как создать многомерный массив FRIE Общие вопросы Javascript 29 02.06.2010 19:14