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

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

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

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- 15 часов назад
- 137 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Можно ли тестировать javascript код по кнопке на клиенте?
- 1 подписчик
- 15 часов назад
- 73 просмотра
1

ответ
JavaScript

Простой
Как изменить набор ключей в массиве?
- 1 подписчик
- вчера
- 102 просмотра
2

ответа
JavaScript

Средний
Как стилизовать select в cs-cart?
- 1 подписчик
- 03 нояб.
- 40 просмотров
0

ответов
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 70 просмотров
2

ответа
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 318 просмотров
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 100 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Возможно ли убрать шапку в telegram mini app?
- 3 подписчика
- 02 нояб.
- 367 просмотров
1

ответ
JavaScript

Простой
Где попрактиковаться с табличными данными, как Pandas, в JS?
- 1 подписчик
- 02 нояб.
- 117 просмотров
1

ответ
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 57 просмотров
0

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

JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать интерфейс (UX/UI) для финансового сервиса

05 нояб. 2024, в 02:29

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

Исправить критические ошибки архитектуры приложения на Flutter, чаты

05 нояб. 2024, в 01:36

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

Редактирование 2 рекламных видеороликов, нарезка для рекламы, озвучка

05 нояб. 2024, в 00:45

2000 руб./в час

На 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?

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

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

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