私の配列を1つのオブジェクトとして持ち、リストに印刷する

Question

私のコードを実行すると、その名前の犬1が印刷され、次に玩具の数が2になります。私はそれが "犬1：（名前）"であり、その右側に "玩具（数字）"であるように印刷する必要があります。それはそのようなリストの中で下降するはずですが、私はそれをどうやって作るかを理解できません。これをどうすれば解決できますか？

function start() { 
    document.getElementById("task").innerHTML = "Task 8"; 
    var arr = []; 
    var vName = ""; 
    var vToys = ""; 
    vName = prompt("Enter dog name (leave blank to stop)"); 
    vToys = parseInt(prompt("Enter dogs toys (leave blank to stop)")); 
    while (vName.length > 0) { 
    arr.push(vName); 
    arr.push(vToys); 
    vName = prompt("Enter dog name (leave blank to stop)"); 
    vToys = parseInt(prompt("Enter dogs toys (leave blank to stop)")); 
    } 
    var name = function name(dogs) { 
    return dogs.map(function(dogName, index) { 
     return "Dog " + (index + 1) + ": " + dogName; 
    }); 
    }; 
    var Tname = function Tname(toys) { 
    return toys.map(function(toyNum) { 
     return "No. of toys: " + toyNum; 
    }); 
    }; 
    arr.forEach(function(entry) { 
    var vOutput = "Dog names and No. of toys: <br/>" + name(arr).join("<br/>") + Tname(arr).join("<br/>"); 
    document.getElementById("output").innerHTML = vOutput; 
    }); 
} 

Answer 1

あなたは、単一のループで出力を作成する必要が

function start() { 
 
    document.getElementById("task").innerHTML = "Task 8"; 
 
    var arr = []; 
 
    var vName = ""; 
 
    var vToys = ""; 
 

 
    do { 
 
    vName = prompt("Enter dog name (leave blank to stop)").trim(); 
 
    vToys = vName && parseInt(prompt("Enter dogs toys (leave blank to stop)").trim()); 
 
    if (vName && vToys) { 
 
     arr.push({ 
 
     name: vName, 
 
     nToys: vToys 
 
     }); 
 
    } 
 
    } while (vName && vToys) 
 
    var vOutput = "Dog names and No. of toys: <br/>" + arr.map((dog, idx) => { 
 
    return 'Dog: ' + dog.name + ', No of toys: ' + dog.nToys 
 
    }).join('<br />'); 
 
    document.getElementById("output").innerHTML = vOutput; 
 
} 
 

 
start();

<div id="task"></div> 
 
<div id="output"></div>