1

Такой код

let items = document.querySelectorAll('.items');

$.each(body , function (key){
        for (let i = 0; i < items.length; i++) {
            items[i].innerHTML = '<p>' + key + '</p>' + '<p>' + 'Price:$' + body[key] + '</p>';
        }
    });

let items = document.querySelectorAll('.items'); Класс может находится в разных файлах и областях DOM.

В эту функцию будет приходить объект(json) ключ значение.

Входящий массив объект нужно перебрать и вывести разные значения, как это сделать?

В данный момент выводит последний элемент массива.

Вот разметка

<ul class="products">
                <li>
                    <a href="#" class="item">
                        <div class="items">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="item">
                        <div class="items">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="item">
                        <div class="items">
                        </div>
                    </a>
                </li>
            </ul>
3
  • Чтобы вывести все, вместо innerHTML используйте функцию append 7 дек 2018 в 10:29
  • 1
    .innerHTML += такая мелочь, а уже упускается...
    – NeedH8
    7 дек 2018 в 12:28
  • append сбивает event который привязан к DOM. += выводит весь входящий массив в каждый элемент. Нужен вывод в 1 элемент один ключ и одно значение, во второй элемент второй ключ и второе значение и так в каждый элемент "p" родительского класса .items 7 дек 2018 в 13:06

1 ответ 1

1

const jsn = [{'key':'aaa','price':100},{'key':'bbb','price':200},{'key':'zzz','price':300}];

let items = document.querySelectorAll('.items');

items.forEach((item, index) =>{
  item.innerHTML = '<p>' + jsn[index].key + '</p>' + '<p>' + 'Price:$' + jsn[index].price + '</p>'
})
<ul class="products">
                <li>
                    <a href="#" class="item">
                        <div class="items">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="item">
                        <div class="items">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="item">
                        <div class="items">
                        </div>
                    </a>
                </li>
            </ul>

2
  • Спасибо. Отличный пример. А если такой массив { "ручка": "10", "карандаш": "5", "точилка": "8" } 8 дек 2018 в 6:32
  • 1
    Точно так же, только добавляете 3 поля, а не два.
    – Lukas
    8 дек 2018 в 22:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.