Невозможно, чтобы мои объекты JavaScript отображались в отдельных столбцах

Я не могу, чтобы мои 2 объекта Javascript отображались в отдельных столбцах DOM. У меня должна быть страница с двумя столбцами, на которой отображаются данные первого лица с одной стороны и данные второго лица с противоположной стороны.

Я попытался использовать цикл для добавления к столбцам div, которые я создал. У меня есть контейнер div в теле с двумя отдельными идентификаторами для добавления.

sabio.page.startUp = () => {

  people = [{
      "firstName": "John",
      "lastName": "Doe",
      "age": 23,
      "streetAddress": "123 Main St.",
      "city": "Culver City",
      "state": "CA",
      "zip": 92340
    },
    {
      "firstName": "Juan",
      "lastName": "Doe",
      "age": 47,
      "streetAddress": "123 Main St.",
      "city": "Culver City",
      "state": "CA",
      "zip": 92340
    }
  ]
  console.info(people);

  sabio.page.mapObjFunc(people);
}



sabio.page.mapObjFunc = person => {
  for (let i = 0; i < people.length; i++) {

    console.info(i);
    $("#div" + i).append("<h1>" + i + ": " + people[i] + "</h1>");
    people[i] + "<br>";
  }
}

<div class = "container">
  <div class = "row">
    <div class = "col-sm-6" id = "div0">
      <h1>Column 1</h1>
    </div>
    <div class = "col-sm-6" id = "div1">
      <h1>Column 2</h1>
    </div>
  </div>
</div>

Ожидаемый результат состоит в том, что мои объекты из двух человек отображаются в DOM в двух отдельных столбцах. Я не получаю никаких сообщений об ошибках, когда работаю с моим кодом.

javascript html css arrays bootstrap-4

17.07.2019 03:59

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 2

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

Элементы массива people являются объектами. Вам нужно перечислить свойства каждого объекта. Вот измененный код:

for (let i = 0; i < people.length; i++) {
  let p = people[i];
  let info = '<div>';
  for (let k in p) {
     info += k + ' ' + p[k] + '<br>'
  }
  info += '</div>';
  $("#div" + i).append("<h1>" + i + ": " + info + "</h1>");
}

17.07.2019 04:20

Я не понимаю, почему под вашей строкой добавления есть тег разрыва. Кроме того, вы уже закрыли свою функцию добавления.

Может ты имеешь в виду вот так?

for (let i = 0; i < people.length; i++) {
        console.info(i);
        $("#div" + i).append("<h1>" + i + ": " + people[i] + "</h1><br>");
        //people[i] + "<br>"; <-- This is an error
  }

17.07.2019 04:30

Другие вопросы по теме

Perl добавляет <a></a> вокруг слов в теге HTML/XML

Проблема с поиском элемента с селеном и определением идентификатора

-webkit-fill-available не работает в Firefox

Угловая навигация по материалам не работает должным образом

Почему эта гиперссылка не работает так, как здесь написано?

Пользовательский HTML-интерфейс редактора сценариев Google Sheets не может прочитать возвращаемый тип

Остановить подчеркивание от увеличения

Модальное окно не прокручивается

CSS: Почему @font-face не работает в Firefox?

Перенаправить на URL, введенный в текстовое поле

Невозможно, чтобы мои объекты JavaScript отображались в отдельных столбцах

Ответы 2

Другие вопросы по теме

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