Javascript 如何将对象（及其属性/值）打印到DOM

我正在学习对象操作，并通过制作一个“地址簿”进行练习，它接受名称值，将它们添加到对象中，将对象加载到数组中，然后输出名称列表

每次我尝试输出姓名列表时，结果如下所示：

"0: [object Object]; "

我尝试了JSON.stringify，但没有成功。如何将对象输出到DOM？我想显示数组中的所有对象

Javascript:

var allInfo = []; //Store names (as objects) here
var output = printList('output');
var cache = [];
var numOfNames = 0;
var nameCounter = 0

alert("JS Works");


function buildList() { //Makes a new object, and pushes it to the 'allInfo' Array
  var info = {};
  info.firstName = document.getElementById('firstName').value;
  info.middleName = document.getElementById('middleName').value;
  info.lastName = document.getElementById('lastName').value;
  allInfo.push(info);
  addName(1);
  clear();
  alert("Logged");

}


function resetList() {
  allInfo = [];
  numOfNames = 0;
  nameCounter = 0;
  addName(0);
  blankOut();
}

function blankOut() {
  document.getElementById('output').innerHTML = " ";
}

//Problem Function
function generate(o) { //Here is where I am having trouble.
  var out = ''; // This is supposed to output a list of names but doesnt.
  for (var p in o) {
    out += p + ': ' + o[p] + '; ';
  }
  document.getElementById('output').innerHTML = (JSON.stringify(out, null, 4));

}







function addName(x) {
  if (x > 0) {
    nameCounter++;
    numOfNames = nameCounter;
    document.getElementById('numOfNames').innerHTML = numOfNames;
  } else {
    nameCounter = 0;
    numOfNames = 0;
    document.getElementById('numOfNames').innerHTML = numOfNames;
  }
}

function printList(x) {
  var output = getById(x);
  return function (text) {
    output.innerHTML += text + '\n';
  };
}


function getById(x) {
  return document.getElementById(x);
}


function clear() {
  document.getElementById("firstName").value = "";
  document.getElementById("middleName").value = "";
  document.getElementById("lastName").value = "";
}

不重复： 不是复制品。我正试图做相反的事。我试图将所有属性和值从和数组/对象输出到DOM。我知道如何从DOM中“抓取”它们作为其他链接地址，我正试图反刍数组/对象，所以正好相反

---

这里的jsiddle链接：

基本上您必须迭代两次。首先是单个条目。第二个领域

var allList = [{firstName: "Frank", lastName: "Tester"}, {firstName: "List", lastName: "Tester 2"}];

function generate(list) {
    var out = '';

    for (var i in list) {
        var rec = list[i];
        var row = [];

        for (var field in rec) {
            row.push(field + ': ' + rec[field]);
        }

        out += "<li>" + row.join(', ') + "</li>";
    }

    return "<ul>" + out + "</ul>";
}

document.write(generate(allList));

var allList=[{firstName:“Frank”，lastName:“Tester”}，{firstName:“List”，lastName:“Tester 2”}]；
函数生成（列表）{
var out=''；
用于（列表中的var i）{
var rec=列表[i]；
var行=[]；
for（rec中的var字段）{
row.push（字段+'：'+rec[field]）；
}
out+=“
”+行。连接（“，”）+“
”；
}
返回“
”+out+”
”；
}
编写（生成（所有列表））；

看

---

只是为了得到这个想法。我建议你学习函数式编程。当使用库（下划线，lodash）时，这可以用更少的代码完成；-）

可能的重复不是重复。我正试图做相反的事。我试图将所有属性和值从和数组/对象输出到DOM。我知道如何从DOM中“抓取”它们作为其他链接地址，我正试图反刍数组/对象，所以正好相反。你告诉JS打印出对象。您必须手动取出字段（firstName、lastName等）。写一个函数来为你做这件事。我以为我用了“for（p in o）”，我假设o是包含所有记录的列表（allInfo）。它是？