Как вывести объект из JS в HTML?

Question

Hiroshima @Hiroshima

Ровный пацанчик нигде не пропадет!

Как вывести объект из JS в HTML?

Как сделать чтобы весь объект вывелся в html документ, т.е. не просто чтобы в строку выводился, а выводился в блоки с собственным id.

Примерно как должно выглядеть:

<div>
    <span id="car">Марка автомобиля: Dodge</span>
    <span  id="car">Год выпуска: 1967</span>
    <span  id="car">Цвет: красный</span>
    <span  id="car">Тип кузова: Hard Top</span>
</div>

var car = {
    "model": "Dodge",
    "year": 1967,
    "color": "red",
    "body": "Hard top"
}

for (let j in car) {
    document.getElementById("car").innerHTML = (car[j]); //выводит тока последний элемент Hard top =(
};

Доп. вопрос на который можно и не отвечать: как засунуть картинку в объект и чтобы при выводи у нее был id="Img_Car" ?

к примеру:

var car = {
    "model": "Dodge",
    "year": 1967,
    "color": "red",
    "body": "Hard top"
   "img": "/images/car-1" 
}

Вопрос задан более трёх лет назад
7532 просмотра

7 комментариев

Подписаться 1 Средний 7 комментариев

Lord_Dantes @Lord_Dantes

На JS при for добавьте функцию добавления ID и вписывайте значение.

Написано более трёх лет назад
WapSter @wapster92 Куратор тега JavaScript

У меня вопрос? нафига готовый результат загонять в цикл, у тебя же там анотации есть к каждому свойству объекта, как ты их вставлять то собрался? Просто обратись к свойствам объекта и все.

Написано более трёх лет назад

Hiroshima @Hiroshima Автор вопроса

Можете написать как должно быть, а то у меня не выходит ?

function draw() {
    var element = document.getElementById('car');
    var link = document.createElement('h1');
    var br = document.createElement('br');

    link.innerHTML = car[j];

    element.appendChild(br);
    element.appendChild(linl);
}

Написано более трёх лет назад

WapSter @wapster92 Куратор тега JavaScript

Hiroshima, https://codepen.io/wapster92/pen/zYryGVa вот так это должно быть, и без вских циклов

Написано более трёх лет назад
Hiroshima @Hiroshima Автор вопроса

WapSter, Спасибо !

Написано более трёх лет назад
Hiroshima @Hiroshima Автор вопроса

WapSter, как отметить решением твой коммент ?

Написано более трёх лет назад
WapSter @wapster92 Куратор тега JavaScript

Hiroshima, никак, это же коммент)

Написано более трёх лет назад

Решения вопроса 2

Комментировать

4 комментария

Hiroshima @Hiroshima Автор вопроса

Выдает ошибку:

javascript.js:2 Uncaught TypeError: Cannot read property 'content' of null
at javascript.js:2

Написано более трёх лет назад
Stalker_RED @Stalker_RED

Hiroshima, я же не вижу ваш код. видимо вы изменили template или его id

Написано более трёх лет назад

Hiroshima @Hiroshima Автор вопроса

Stalker_RED, нет, я полностью его скопировал

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <script src="/javascript.js"></script>
    <title>Document</title>
</head>

<body>

    <template id="car-template">
        <div class="car">
          Марка автомобиля: <span class="model">Dodge</span><br>
          Год выпуска: <span class="year">1967</span><br>
          Цвет: <span class="color">красный</span><br>
          Тип кузова: <span class="body">Hard Top</span><br>
          <img src="" alt="" class="img">
        </div>
      </template>


</body>

</html>

.car {
    width: 300px;
    padding: 1em;
    border: dashed 1px gray;
    margin: 1em;
}

.car span {
    border-bottom: dashed 1px gray;
}

const template = document.getElementById('car-template');
const carTemplate = template.content.querySelector('.car');

getData().forEach(car => {
    const carElem = document.importNode(carTemplate, true);
    for (const key in car) {
        if (key === 'img') {
            carElem.querySelector('.img').src = car.img;
        } else {
            carElem.querySelector('.' + key).textContent = car[key];
        }
    }
    document.body.appendChild(carElem)
});











function getData() {
    return [{
            "model": "Dodge",
            "year": 1967,
            "color": "red",
            "body": "Hard top",
            "img": "/images/car-1"
        },
        {
            "model": "Cadillac",
            "year": 1968,
            "color": "blue",
            "body": "Hard top",
            "img": "/images/car-2"
        },
    ];
}

Написано более трёх лет назад

Stalker_RED @Stalker_RED

Hiroshima, вы выполняете js еще до того как загружен body, поэтому элемент template не найден.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

1 комментарий

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

HTML

+1 ещё

Простой
Как внизу блока сделать маску волной и поместить туда изображение?
- 2 подписчика
- 4 часа назад
- 24 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 5 часов назад
- 19 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 10 часов назад
- 46 просмотров
2

ответа
JavaScript

Простой
Почему не правильно срабатывает условие в цикле?
- 1 подписчик
- 11 часов назад
- 80 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Расскажите про паттерны работы с GraphQL?
- 7 подписчиков
- 16 часов назад
- 573 просмотра
1

ответ
JavaScript

Средний
Как сделать swiper autoplay с несколькими видео?
- 1 подписчик
- вчера
- 56 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему неправильное время в JavaScript?
- 1 подписчик
- вчера
- 120 просмотров
1

ответ
JavaScript

Простой
Как получить родителя с определенным атрибутом?
- 1 подписчик
- вчера
- 47 просмотров
1

ответ
JavaScript

Простой
Есть ли какой нибудь полифил для importmap?
- 1 подписчик
- вчера
- 56 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Ошибка three на редми ноте 7 как решить?
- 1 подписчик
- вчера
- 80 просмотров
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Разработка Roguelike-игры на Unity для Android

26 дек. 2024, в 01:11

120000 руб./за проект

Доработка веб-платформы на PHP

26 дек. 2024, в 00:27

35000 руб./за проект

Нарисовать обложку для рекламной кампании в VK Ads

25 дек. 2024, в 22:59

1000 руб./в час

На JS при for добавьте функцию добавления ID и вписывайте значение.
У меня вопрос? нафига готовый результат загонять в цикл, у тебя же там анотации есть к каждому свойству объекта, как ты их вставлять то собрался? Просто обратись к свойствам объекта и все.
Можете написать как должно быть, а то у меня не выходит ?

function draw() { var element = document.getElementById('car'); var link = document.createElement('h1'); var br = document.createElement('br'); link.innerHTML = car[j]; element.appendChild(br); element.appendChild(linl); }
Hiroshima, https://codepen.io/wapster92/pen/zYryGVa вот так это должно быть, и без вских циклов
WapSter, как отметить решением твой коммент ?

Answer 1 · 2020-07-20 10:11:58

var car = {
    "model": "Dodge",
    "year": 1967,
    "color": "red",
    "body": "Hard top"
    "img": "/images/car-1" 
}

for (let j in car) {
  const element = document.getElementById(j);
  if (element) {
    element.innerHTML = (car[j]);
  }
};

Answer 2 · 2020-07-20 10:50:05

Stalker_RED @Stalker_RED

Ответ написан более трёх лет назад

4 комментария

Answer 3 · 2020-07-20 09:19:56

Олег @politon

HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...

ID должен быть уникальным

Ответ написан более трёх лет назад

1 комментарий

Как вывести объект из JS в HTML?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт