Итерировать объект JSON и добавить в DIV

У меня есть объект JSON, например:

{ Naam: "bert", Achternaam: "Kopers"}

Я хотел бы отобразить это в элементе DIV на моей HTML-странице. Должно получиться так:

   <div id = "contents>
        <div class = "setting-label">
            Naam
        </div>
        <div class = "setting-value">
            bert    
        </div>
    </div>
    <div class = "setting-row">
            <div class = "setting-label">
                AchterNaam
            </div>
            <div class = "setting-value">
                kopers  
            </div>
        </div>

Желательно, чтобы это было без innerHTML. Итак, с appendChild. Как выглядит код?

javascript html json dom

08.12.2018 23:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

616

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это должно работать:

onload = function() {
      var person = {Naam: "Bert", Achternaam: "Kopers"};
      var contents = document.getElementById("contents");

      for(var key in person) {
        var personDiv = document.createElement("div");
      
        var div1 = document.createElement("div");
        var text1 = document.createTextNode(key);
        div1.appendChild(text1);
        
        var div2 = document.createElement("div");
        var text2 = document.createTextNode(person[key]);
        div2.appendChild(text2);
        
        personDiv.appendChild(div1);
        personDiv.appendChild(div2);
        
        contents.appendChild(personDiv);
      }
}

<div id = "contents"></div>

Даст вам HTML-вывод:

<div id = "contents">
  <div>
    <div>Naam</div>
    <div>Bert</div>
  </div>
  <div>
    <div>Achternaam</div>
    <div>Kopers</div>
  </div>
</div>

благодаря. Это работает. Мне интересно, могу ли я использовать функцию, чтобы сделать его чище / проще

— 09.12.2018 09:43

Конечно вы можете! Вы можете поместить этот код в функцию, скажем, loadPerson(), а затем вызвать эту функцию в функции onload = function().

— 09.12.2018 13:37

Кроме того, если вы хотите продвинуть его дальше, вы можете создать функцию, которая создает элемент div и помещает в него некоторый текст, а затем вызывает его для создания div1 и div2.

— 09.12.2018 13:39

08.12.2018 23:18