javascript - 如何将对象(及其属性/值)打印到 DOM

Question

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

每次我尝试输出名称列表时，结果都是这样的:

"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 中“抓取”它们作为其他链接地址，我试图反省数组/对象，所以相反。

JSFiddle 链接在这里:https://jsfiddle.net/jeffward01/zfv1zy50/

Answer 1

基本上你必须迭代两次。首先是单个条目。第二个是字段。

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));

参见Fiddle

只是为了了解这个想法。我建议你学习函数式编程。当使用库(下划线、lodash)时，可以用更少的代码来完成此操作;-)