Javascript - сохранить входные данные в объекте, затем в массив, а затем отобразить на странице

Question

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

function init() {
    var vPerson1 = {};
    var people = [];
    var dogname = "";
    var toysamt = "";
    dogname = prompt("Please enter dog name");
    toysamt = prompt("Please enter toys amount");
    while (dogname != "" && toysamt != "") {
        vPerson1[dogname] = dogname;
        vPerson1[toysamt] = toysamt;
        people.push(vPerson1);
        dogname = prompt("Please enter dog name");
        toysamt = prompt("Please enter toys amount");
}

var vIndex = 0;
var outputpeople = "";
for (vIndex = 0; vIndex < people.length; vIndex++) {
outputpeople = outputpeople + people[vIndex] + "<br />";
document.getElementById("msg1").innerHTML = outputpeople;
}

}

window.onload = init;  

Запуск этого кода:

Я ввожу «Джефф» и «3» для первых двух полей ввода, а затем «Боб» и «6"для второго набора полей ввода я оставляю следующие 2 текстовых поля пустыми, чтобы завершить цикл.На странице отображается следующее:

[объект Object]

[объект Object]

Выходные данные должны выглядеть примерно так:

Собака 1 Имя: ... Количество игрушек: ...

Собака 2 ...

Мне также нужна функция, которая подсчитает общее количество игрушек, если кто-то может помочь стот.:)

Заранее спасибо!

Answer 1

Вы можете попробовать следующее

function init() {
        var people = [];
        var dogname = prompt("Please enter dog name");
        var toysamt = prompt("Please enter toys amount");
        while (dogname != "" && toysamt != "") {
            /* Assuming that you need "dogname" as the key 
             * and not the user input value as key */
            people.push({dogname, toysamt});
            dogname = prompt("Please enter dog name");
            toysamt = prompt("Please enter toys amount");
        }

        var toys = 0;
        /* You can prepare the output html using Array.reduce function */ 
        document.getElementById("msg1").innerHTML = people.reduce((a,c, i) => {
           a += "Dog " + (i+1) + " Name:" + c.dogname + ", No. of toys:" + c.toysamt + "<br/>";
           toys += parseInt(c.toysamt);
           return a;    
        }, "");
        document.getElementById("msg1").innerHTML += "Total Number of toys: " + toys;
}

window.onload = init;

<div id="msg1"></div>