Вывод данных Javascript
У JavaScript есть несколько различных способов «отобразить» данные:
- Запись в HTML элемент при помощи свойства innerHTML.
- Запись в вывод HTML при помощи метода document.write().
- Запись в окно предупреждений при помощи метода window.alert().
- Запись в консоль браузера при помощи метода console.log().
Использование innerHTML
Чтобы получить доступ к HTML элементу, JavaScript должен воспользоваться методом document.getElementById(id). Атрибут id определяет идентификатор HTML элемента. Свойство innerHTML определяет выводимый HTML контент:
Моя веб-страница
Первый параграф
Изменение свойства innerHTML элемента HTML это обычный способ вывода данных в HTML.
Использование document.write()
В тестовых целях для вывода данных можно использовать метод document.write():
Моя веб-страница
Первый параграф
Следует помнить, что использование метода document.write() после полной загрузки HTML документа удалит весь существующий HTML код:
Моя веб-страница
Первый параграф
Метод document.write() следует использовать только для тестирования.
Использование window.alert()
Для отображения данных также можно использовать окно сообщений. Для этого нужно воспользоваться методом window.alert():
Моя веб-страница
Первый параграф
Использование console.log()
Во время отладки скрипта, чтобы увидеть некие данные, вы можете вывести их в консоль браузера. Для этого используется метод console.log():
Подробнее об отладке скриптов будет рассказано в следующих главах.
Как вывести объект в консоль js
Чтобы вывести в консоль плоский объект (объект, в котором нет вложенных объектов или массивов), достаточно передать его в console.log() :
const plainObject = name: 'John', age: 35, isMarried: true, >; console.log(plainObject); // => Для вложенных объектов с глубиной вложенности не более двух ситуация аналогичная: просто передаём такой объект в console.log() и всё будет работать как надо:
const nestedObject = firstLevel: secondLevel: name: 'John', age: 35, isMarried: true, >, >, >; console.log(nestedObject); // => < firstLevel: < secondLevel: < name: 'John', age: 35, isMarried: true >> > Но для уровня вложенности три и более такой способ уже не подойдет, и мы увидим следующее:
const deepNestedObject = firstLevel: secondLevel: thirdLevel: name: 'John', age: 35, isMarried: true, >, >, >, >; console.log(deepNestedObject); // => < firstLevel: < secondLevel: < thirdLevel: [Object] >> > Здесь нам на помощь приходит метод JSON.stringify() , который преобразует объект в JSON строку. Работать этот способ будет с любым уровнем вложенности:
console.log(JSON.stringify(deepNestedObject, null, 2)); /* => < "firstLevel": < "secondLevel": < "thirdLevel": < "name": "John", "age": 35, "isMarried": true >> > > */ Вывести данные объекта в HTML
Всем привет, столкнулся с такой проблемой, у меня есть функция которая считает количество неактивных студентов и сохраняет результат в объект, результат выглядит следующий образом: <1: 1, 2: 1, 3: 1, 4: 2, 5: 0>. Теперь мне нужно вывести этот результат на html страницу. Я не совсем понимаю как это сделать. Пытался передать result напрямую в span, но на странице выводится только текст [object][Object]. Буду благодарен за помощь
div>Количество неактивных студентов в разрезе курсов: span id = "notActiveCourse">/span>/div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
function calculate(array) { let result = {}; let len = array.length; for (let i = 0; i len; i++) { let item = array[i]; let course = item.course; if (!(course in result)) result[course] = 0 if (!item.active) ++result[course]; } return result; } console.log("Количество неактивных студентов в разрезе курсов:", calculate(students));
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как вывести данные из js-объекта на страницу (в HTML). Задача о рюкзаке
Всем привет, я только начал учить js так что не судите строго. Я использовал вот этот скрипт.
Вывести атрибут объекта в html тэг
С помощью grand = $(this).parents(‘.media.grand’) Формируется объект всегда с разным кол-ом.
Вывести данные из объекта
Как сделать правильно чтобы выполнялось условие с метода find и правильно извлекло данные для.
Как вывести данные из объекта?
Есть объект config::gi() , он содержит: Config Object ( => Array ( .
5059 / 2047 / 397
Регистрация: 06.01.2013
Сообщений: 4,760
Самый простой вариант: JSON.stringify(calculate(students)) и вывести результат.
Можно как-нибудь кастомно отформатировать, типа:
Object.entries(calculate(students)).map(([k, v]) => `на курсе ${k} ${v} неактивных студентов`).join(',')
Регистрация: 05.06.2018
Сообщений: 15
На данный момент вышло вывести в двух форматах. Возможно есть какие-то варианты чтобы это выглядело красивее?
the hardway first
2455 / 1831 / 904
Регистрация: 05.06.2015
Сообщений: 3,599
Сообщение от MateoRich 
чтобы это выглядело красивее
Забудьте на время про скрипт и сверстайте себе разметку так, как хотели бы вы видеть «красиво». Тогда уже будет от чего плясать в скрипте, чтобы было «красиво».
6485 / 3896 / 2005
Регистрация: 14.06.2018
Сообщений: 6,781
По поводу хранения данных в объекте Object — а неудобно.
Там по хорошему надо группировать данные в итерируемый список сразу. Чтобы данные были удобоваримыми.
Сейчас приходится всё равно немножко костылить для преобразования в таблицу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116
html> head> meta charset="utf-8"> style> table { border-collapse: collapse; /* объединяем границы ячеек в одну */ } td, th { border: 1px solid gray; /* задаем сплошную границу размером 1 пикселей цвета gray */ width: 50px; /* ширина ячеек */ height: 20px; /* высота ячеек */ text-align: center; /* горизонтальное выравнивание по центру */ padding: 5px; } caption { font-size: 1.17em; /* Размер шрифта */ font-weight: bold; /* жирное начертание */ margin-bottom: 0.5em; /* отступ под заголовком */ } style> head> body> div id="tableWrapper">div> script> /** * Таблица на * @param wrapper Внешний DOM-элемент, в конец которого вставлять таблицу * @param caption Строка-заголовок таблицы * @param headArray Массив заголовков столбцов таблицы * @param bodyArray Основной массив таблицы * @param footArray Массив итогов таблицы */ function createTable(wrapper, caption, headArray, bodyArray, footArray) { let s = `table>`; if (typeof caption === "string" && caption.length) { s += `caption>${caption}caption>`; } if (Array.isArray(headArray) && headArray.length) { s += `thead>tr>`; for (let name of headArray) s += `th>${name}th>`; s += `tr>thead>`; } s += `tbody>`; for (let row of bodyArray) { s += `tr>`; for (let e of Object.values(row)) s += `td>${e}td>`; s += `tr>`; } s += `tbody>`; if (Array.isArray(footArray) && footArray.length) { s += `tfoot>tr>`; for (let summary of footArray) s += `th>${summary}th>`; s += `tr>tfoot>`; } s += `table>`; wrapper.insertAdjacentHTML("beforeend", s); } function calculate(array) { // Нужно сразу выставить нули и не надеяться на список студентов let result = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 }; let len = array.length; for (let i = 0; i len; i++) { let item = array[i]; let course = item.course; // if (!(course in result)) // Нули уже были // result[course] = 0 if (!item.active) ++result[course]; } return result; } let students = [ { name: "Ivan", estimate: 4, course: 1, active: true }, { name: "Petr", estimate: 3, course: 1, active: false }, { name: "Alex", estimate: 2, course: 4, active: false }, { name: "Max", estimate: 5, course: 2, active: true }, { name: "Anton", estimate: 2, course: 3, active: true }, ]; createTable( document.getElementById("tableWrapper"), "Количество неактивных студентов", ["Курс", "Количество"], Object.entries(calculate(students)), ["Всего:", students.filter(student => !student.active).length] // Итоги не обязательны ); script> body> html>
Курсы javascript
В переменной лежит объект table (или указатель на него, хз). Надо вывести этот table в div средствами js, просто чтобы вывелась таблица целиком. Так не работает:
function output ( object )
Как правильно это делать?
28.01.2012, 22:57
Интересующийся
Регистрация: 13.07.2011
Сообщений: 14
var content = document.getElementById( "content" ); content.innerHTML = object;
Последний раз редактировалось uznik73, 28.01.2012 в 22:59 .
28.01.2012, 23:01
Интересующийся
Регистрация: 25.01.2012
Сообщений: 10
Нет, это было первое, что я попробовал, и оно тоже не работает. Вместо вывода таблицы пишет в том div-е «[object HTMLCollection]»
Вывести объекты на страницу [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
Закрыт 4 года назад .
хочу вывести обьекты на странныцу с моих условиям.
var products = [ < name: "chair", inventory: 5, unit_price: 45.99 >, < name: "table", inventory: 10, unit_price: 123.75 >, < name: "sofa", inventory: 2, unit_price: 399.50 >]; var input=$("input"); var button=$("button"); button.click(function() < for(var i=0; i> >);Отслеживать
12.2k 1 1 золотой знак 21 21 серебряный знак 40 40 бронзовых знаков
задан 19 окт 2019 в 12:10
Виталий Слободянюк Виталий Слободянюк
161 2 2 серебряных знака 13 13 бронзовых знаков
Обратите внимание на знак «галочка» слева от ответов на Ваши вопросы. Этот знак — для Вас.
– user176262
19 окт 2019 в 12:24
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
var products = [< name: "chair", inventory: 5, unit_price: 45.99 >, < name: "table", inventory: 10, unit_price: 123.75 >, < name: "sofa", inventory: 2, unit_price: 399.50 >]; var input = $("input"); var button = $("button"); button.click(function() < var content = []; for (var i = 0; i < products.length; i++) < if (products[i].inventory > document.getElementById("list").innerHTML = content.join("
"); >);Отслеживать
ответ дан 19 окт 2019 в 12:22
user176262 user176262
- javascript
- jquery
-
Важное на Мете
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как реализовать вывод массива js в html
Вывести массив из js на страницу можно разными способами. Рассмотрим некоторые из них.
Пример №1 — У нас есть место на странице куда должны попасть данные.
class="basket"> class="fruit">