Как вывести объект из 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" 
}

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

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 комментарий

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Простой
Как посчитать сумму ячеек в строках таблицы на JS?
- 1 подписчик
- 2 минуты назад
- 6 просмотров
0

ответов
JavaScript

Простой
Как происходит сборка JS с множеством страниц и компонентов?
- 1 подписчик
- 36 минут назад
- 33 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как при нажатии на кнопку сделать плавное перемещение блока div?
- 1 подписчик
- 43 минуты назад
- 30 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать задержку после клика?
- 1 подписчик
- 57 минут назад
- 39 просмотров
1

ответ
JavaScript

Простой
Как сделать бесконечный скролл вверх?
- 1 подписчик
- час назад
- 14 просмотров
0

ответов
JavaScript

Простой
Почему скрипт неправильно проводит арифметическую операцию?
- 1 подписчик
- 14 часов назад
- 54 просмотра
1

ответ
HTML

+2 ещё

Простой
Как сделать кнопки по местоположению на AMP?
- 1 подписчик
- 16 часов назад
- 43 просмотра
1

ответ
JavaScript

Простой
Onmousedown для прямой в js, как определить координаты прямой?
- 1 подписчик
- вчера
- 106 просмотров
0

ответов
HTML

+1 ещё

Простой
Как осздать центрированный шаблон?
- 1 подписчик
- вчера
- 68 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Javascript как сделать чтобы отправлялись уведомления на компьютере с сайта в фоновом режиме?
- 1 подписчик
- вчера
- 193 просмотра
2

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

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

SummerWeb • Ярославль

от 120 000 до 180 000 ₽

JavaScript Developer (backend / fullstack)

Brightdata • Тель-Авив

от 5 500 до 6 500 $

Frontend Developer (JavaScript)

R2C

До 4 000 $

Написать статью с обзором проекта – Cryptocartel

26 июн. 2024, в 10:28

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

Доработки сайтов на Аспро

26 июн. 2024, в 10:25

2000 руб./в час

Разработать телеграм бота для приюта для бездомных животных

26 июн. 2024, в 08:33

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]);
  }
};