Получение объектов из localStorage работает с журналом консоли, но не на странице

Question

Я только начал изучать localStorage API, и я пытаюсь сохранить ассоциативные массивы (объекты) и извлечь их. Я использую JSON.stringify при сохранении и JSON.parse при получении. Однако, когда я использую element.innerHTML, он показывает [object]['object], хотя console.log работает нормально (показывает объект со всеми данными). Я хочу показать это в следующем формате:

Id: 1

Имя: Джон

Фамилия: Доу

Должность: юрист

Id: 2

Имя: Салли

Фамилия: Stevens

Должность: генеральный директор

    var msg_display = document.getElementById("msg_display");

    var employees = [
                 {
                  'id': 1,
                  'name':'John',
                  'surname':'Doe',
                  'position':'Lawyer'
                 },
                 {
                  'id': 2,
                  'name':'Sally',
                  'surname':'Stevens',
                  'position':'CEO'
                 },
                 {
                  'id': 3,
                  'name':'Martin',
                  'surname':'Gordons',
                  'position':'Accountant'
                 }
                ];



    localStorage.setItem("employees", JSON.stringify(employees));

    var employee_list = localStorage.getItem("employees");
    employee_list = JSON.parse(employee_list);

     for(var i = 0; i < employee_list.length; i++){
        console.log(employee_list[i]);

        msg_display.innerHTML = "id: " + employee_list[i] + "<br>";
        msg_display.innerHTML+= "name: " + employee_list[i] + "<br>";
        msg_display.innerHTML+= "surname: " + employee_list[i] + "<br>";
        msg_display.innerHTML+= "position: " + employee_list[i] + "<br>";

     }

Я знаю, что есть некоторые библиотеки для работы с localStorage , но я не хочу начинать работать с ними, пока не пойму ограничения работы без них. Заранее спасибо

Answer 1

вы получаете сам объект вместо значения. измените для l oop ниже

for(var i = 0; i < employee_list.length; i++){
            console.log(employee_list[i]);

            msg_display.innerHTML = "id: " + employee_list[i].id + "<br>";
            msg_display.innerHTML+= "name: " + employee_list[i].name + "<br>";
            msg_display.innerHTML+= "surname: " + employee_list[i].surname + "<br>";
            msg_display.innerHTML+= "position: " + employee_list[i].position + "<br>";

         }