как мне в цикле вывести массив 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,880 12 12 серебряных знаков 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
Как вывести массив в шаблон ?
Дык модель не должна с шаблоном напрямую взаимодействовать. В котроллере подготавливайте что вам надо и передавайте в шаблон готовую переменную тайтла и вставляйте куда хотите.
Sonat
- Испытатели
- Сообщений: 1216
#3 5 января 2017 в 16:02
Нико, Вы все пытаетесь делать не читая документации.
читайте docs.instantcms.ru/dev/controllers/templates передавайте свои данные из модели в шаблон, а в шаблоне уже выводите где хотите
Создать и вывести массив в JS
Для лучшего понимания, что такое массивы, сделаем вид, что их не существует, обойдемся пока без них. Однако для проведения эксперимента, надо иметь представление о понятии переменной, посмотрите этот урок, если вы не знаете что такое переменная.
Жизнь без массивов
Программист получил список, состоящий из пяти фамилий сотрудников компании, для дальнейшего вывода их на веб-сайте. Для этого, он создал пять переменных с разными названиями, присвоил им эти фамилии и вывел в консоль на JavaScript.
let worker_1 = ‘Петров’, worker_2 = ‘Иванов’, worker_3 = ‘Васильев’, worker_4 = ‘Яковлева’, worker_5 = ‘Степанова’;
console.log(worker_1);
console.log(worker_2);
console.log(worker_3);
console.log(worker_4);
console.log(worker_5);
Согласитесь, что создавать отдельную переменную для каждого сотрудника, контрпродуктивно, а если их будет 50 человек? Намного удобнее все эти фамилии занести в один список (массив) и работать в дальнейшем не с каждой фамилией в отдельности (по типу переменной), а с одним массивом с однотипными данными (элементами массива).
Создать массив на JS
Теперь запишем то же самое, но с применением массивов. Объявим переменную worker и присвоим ей значения (элементы массива) в квадратных скобочках. Вот таким образом создаются массивы.
let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
console.log(worker[0]);
console.log(worker[1]);
console.log(worker[2]);
console.log(worker[3]);
console.log(worker[4]);
Мы получили одинаковый результат, только кода написали значительно меньше.
Как получить и вывести элемент массива на JS
Для получения конкретного элемента массива мы обращаемся к нему не по названию, а по порядковому номеру (индекс массива). К каждой фамилии автоматически прикрепляется индекс, в этой системе отсчет ведется с нуля, прибавляя по единице.Следовательно обращаться к элементу надо через индекс.
let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
console.log(worker[0]); // Петров
console.log(worker[1]); // Иванов
console.log(worker[2]); // Васильев
В консоли выведутся фамилии, а не числовые индексы.
Как вывести весь массив JS
Для вывода в консоли необходимо указать одно его название.
Длина массива JS
В консоли, перед выведенными индексами массива, мы увидели число 5 – это длина массива length. Здесь очень важно понимать, что length не количество элементов массива, а последний индекс +1.
Что можно положить в массив?
В массив можно положить любые типы данных, причем вперемешку. Например, этот массив содержит: число, строку и булевое значение.
let all = [5, «Привет», false];
console.log(all[1]); // вывод в консоли строки Привет
Перезаписать элемент массива
Нам надо заменить 5 на 10, для этого обращаемся к имени массива и указываем в квадратных скобках индекс перезаписываемого элемента. В консоли вывелось число 10, вместо 5.
Вывести массив на странице
Выведем элементы массива в параграфе HTML-документа.
JavaScript код
Получаем параграф с идентификатором out_arr и присвоим ему через innerHTML имя массива worker.
let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
let out_arr = document.getElementById(‘out_arr’);
out_arr.innerHTML = worker;
Фамилии сотрудников выведутся без пробелов или запятых, совсем не презентабельно.
Вывод массива путем перебора элементов
Мы объявили пустую переменную str и запустили цикл for с условием: выводить элементы массива, начиная с 0-го индекса с шагом 1, до тех пор пока длина массива больше счетчика i.
let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’];
let out_arr = document.getElementById(‘out_arr’);
let str = ‘ ‘;
for (let i = 0; i < worker.length; i++ ) if (worker[i]!==undefined) str +=i+' - '+worker[i]+'
‘;
>
out_arr.innerHTML = str;
Запускаем в цикле проверку, чтобы не выводились пустые элементы и прописываем формулу вывода с числами индекса, с дефисом и в столбик.
Заключение
На этом уроке мы научились создавать, изменять и красиво выводить массивы на страницу, а также получать элементы массива по отдельности и все сразу.
Создано 11.01.2019 10:40:01
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 4 ):
vs259hm 14.01.2019 12:14:51
Добрый день. Вот эта конструкция не будет работать: «Создать массив на JS . let worker = [‘Петров’, ‘Иванов’, ‘Васильев’, ‘Яковлева’, ‘Степанова’]; console.log(worker_1); console.log(worker_2); console.log(worker_3); console.log(worker_4); console.log(worker_5);» Думаю, это описка, т.к. обращение к массиву такое worker[1].
porsake 14.01.2019 21:45:18
все примеры рабочие и проверены в консоли, скрины же настоящие.
vs259hm 15.01.2019 06:26:57
Я бы не написал, если бы не проверил. Чего и Вам желаю 🙂
porsake 15.01.2019 14:31:11
спасибо добрый человек за внимательность, теперь исправлено.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
Как вывести массив 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]