Как вывести массив js в html
Перейти к содержимому

Как вывести массив js в html

  • автор:

Как вывести массив js

Рассмотрим несколько способов вывода массива. Наш массив:

const array = ['dog', 'cat', 12, false, ['4', true],  name: 'John', age: 30 >]; 

Выводим массив целиком через console.log() :

console.log(array); 

Чтобы вывести каждый элемент массив отдельно, воспользуемся циклом for :

for (let i = 0; i  array.length; i += 1)  console.log(array[i]); > 

Если нужно вывести определенный элемент, обратимся к нему:

console.log(array[0]); // => dog console.log(array.at(-2)); // => ['4', true] 

Как реализовать вывод массива js в html

Вывести массив из js на страницу можно разными способами. Рассмотрим некоторые из них.

Пример №1 — У нас есть место на странице куда должны попасть данные.

 class="basket">  class="fruit">
class="fruit">
class="fruit">
class="fruit">
class="fruit">

Код ниже положит каждый фрукт в каждый div.

const store = ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'] document.querySelectorAll('.fruit').forEach((n, i) => n.textContent = store[i]) 

Пример №2 — Мы сами создаем структуру на странице в момент обхода массив элементов.

const fruitsAndVegetables = [ ['Apple', 'Mango', 'Peach', 'Orange', 'Lemon'], ['Beets', 'Peas', 'Carrots'] ] const fruitsToTable = (array) =>  const table = document.createElement('table'); // Добавим видимые границы у таблицы table.setAttribute('border', '1'); for (const row of array)  const tr = table.insertRow(); for (const item of row)  const td = tr.insertCell(); td.textContent = item > > return table; > document.body.append(fruitsToTable(fruitsAndVegetables)); 

Как вывести значения из массива в html?

NeiroNx

Кому будем задавать текст: const className = ‘класс элементов’; .

Какие тут есть варианты:

document.querySelectorAll(`.$`).forEach((n, i) => < n.innerText = arr[i]; >); // или const elems = document.getElementsByClassName(className); for (let i = 0; i < elems.length; i++) < elems[i].textContent = arr[i]; >// или $('.' + className).text(i => arr[i]);

как мне в цикле вывести массив js в формате html [закрыт]

Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.

Закрыт 4 года назад .
Отслеживать
задан 7 июн 2019 в 20:34
59 1 1 серебряный знак 6 6 бронзовых знаков
пожалуйста перефразируйте и дополните свой вопрос
7 июн 2019 в 20:39

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

let mass = ["1","2","3"]; let b = document.getElementById("body"); mass.forEach(e => b.innerHTML += "

" + e + "

");

Отслеживать
ответ дан 7 июн 2019 в 20:43
Vitaliy Stop_RU_war_in_UA Vitaliy Stop_RU_war_in_UA
3,890 13 13 серебряных знаков 29 29 бронзовых знаков

это не мой вариант jsfiddle.net/BaNru/0z72a91u/3 вот код который нужно вывести как так и подставив в них элементы массива

7 июн 2019 в 20:45

@jobananas по русски напишите что вам нужно. ничего ж не понятною. Пример я привел как делается вставка html в цикле. на ваш вопрос я ответил

7 июн 2019 в 20:49

korzinka.byethost9.com вот сайт нужно нажать на товар и там справа нужно вывести размеры под ценой пример как это выглядит сдесь garne.com.ua/p97075 я базу данных неиспользую вместо нее таблица гугл там размеры буду брать вот делаю вариант в html формате jsfiddle.net/BaNru/0z72a91u/3 мне нужно конкретно его вывести можете использовать в качестве примера мой вариант?

7 июн 2019 в 20:54

// Создаём глобальную переменную для сохранения в неё нашего значения, _согласно_ВОПРОСА_! var GlobalSize; var shoparray = ['s','l','x','xl','xxl']; document.addEventListener("DOMContentLoaded", function()< var spans = '', options = ''; // проходим по циклу. Этот код надо прогонять постоянно при загрузке товара! // Генерируем HTML shoparray.forEach( function(el,i) < spans += ''+el+''; options += ''; >) // Отрисовываем в документе document.querySelector('.product-sizes').insertAdjacentHTML ('afterbegin', spans); document.querySelector('#ProductSize').insertAdjacentHTML ('afterbegin', options); document.querySelector('#ProductSize').selectedIndex[0]; // Код ниже будет работать всегда и его перезапускать не надо! // Щелчок по элементам // Вешаем клик на родителя, чтобы не вешать обработчик на кадлый элемент отдельно document.querySelector('.product-sizes').addEventListener('click',function(e)< // теперь проверяем, что кликнули именно по необходимому элементу // (проверяем по классу), другие будут игнорироваться if(e.target.classList.contains('product-size'))< // запускаем необходимые действия // Удаляем староый seelect (через цикл для надёжности) document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); // Теперь выбираем текущий элемент e.target.classList.add('selected'); // Сохраняем в переменную согласно вопроса GlobalSize = e.target.dataset.productSize; // Меняем селект, ведь это надо, это подсказывает мой хрустальный шар требуется? document.querySelector('#ProductSize').value = e.target.dataset.productSize; > >) // Событие на изменение select document.querySelector('#ProductSize').addEventListener('change',function(e)< // Опять удаляем все старые выделения document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); // Добавляем новое выделение document.querySelector('[data-product-size="'+e.target.value+'"]').classList.add('selected'); // Пишем в глобальную значение GlobalSize = e.target.value; >) >); 

Отслеживать
ответ дан 7 июн 2019 в 21:07
user337101 user337101
да это оно остается только селект подсветить тем же цветом что и спан подсвечен (выбраный)
7 июн 2019 в 21:12
В CSS пропиши нужный цвет.
– user337101
7 июн 2019 в 21:13
где именно в каком месте?
7 июн 2019 в 21:27
– user337101
7 июн 2019 в 21:29

Вы это имеете в виду? Динамическое создание HTML ? Суть всё еще не понятна))

let sizes = ['s', 'l', 'x', 'xl', 'xxl'] let mama = document.querySelector('.product-sizes'); let select = document.createElement('select'); select.id = "ProductSize"; select.name = "size"; select.size = "1"; for(let i = 0; i < sizes.length; i++)< let span = document.createElement('span'); span.className = 'product-size'; span.setAttribute('data-product-size', sizes[i]); span.innerText = ( sizes[i] ).toUpperCase(); if( i === 0 ) < span.classList.add('selected'); >mama.appendChild( span ); let option = document.createElement('option'); option.value = sizes[i]; option.innerText = ( sizes[i] ).toUpperCase(); select.appendChild( option ); > mama.appendChild( select ); /* Дальше кусок вашего кода, не трогал */ /********************************************/ var GlobalSize; document.addEventListener("DOMContentLoaded", function()< document.querySelector('.product-sizes').addEventListener('click',function(e)< if(e.target.classList.contains('product-size'))< document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); e.target.classList.add('selected'); GlobalSize = e.target.dataset.productSize; document.querySelector('#ProductSize').value = e.target.dataset.productSize; > >) document.querySelector('#ProductSize').addEventListener('change',function(e)< document.querySelectorAll('.product-size.selected').forEach( function(element) < element.classList.remove('selected'); >); document.querySelector('[data-product-size="'+e.target.value+'"]').classList.add('selected'); GlobalSize = e.target.value; >) >);
.product-details .product-sizes < border-bottom: 1px solid #bbb; text-align: center; padding-bottom: 13px; padding-top: 12px; margin-bottom: 13px; >.product-size.selected:hover < color: #fff; >.product-size.selected < border: 1px solid #fa6f57; background: #fa6f57; color: #fff; >.product-size:hover < border: 1px solid #fa6f57; color: #fa6f57; >.product-size

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *