How to print an object (and its properties/values) to the DOM

Question

I am learning object manipulation and am practicing by making an 'address book' that takes name values, add's them to an object, loads the object into an array, and then outputs the list of names.

Everytime I try to output the list of names it comes out like this:

"0: [object Object]; "

I tried JSON.stringify and that did not work. How do I output the object to the DOM? I want to display all of the objects within the array.

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 = "";
}

Not a duplicate: Not a duplicate. I am trying to do the opposite. I am trying to output all properties and values FROM and array/object to the DOM. I know how to 'grab' them from the DOM as the other link addresses, I am trying to regurgitate the array/object, so the opposite.

JSFiddle link here: https://jsfiddle.net/jeffward01/zfv1zy50/

possible duplicate of [Get all Attributes from a HTML element with Javascript/jQuery](http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery) — Script47, Aug 05 '15 at 23:59
Not a duplicate. I am trying to do the opposite. I am trying to output all properties and values FROM and array/object to the DOM. I know how to 'grab' them from the DOM as the other link addresses, I am trying to regurgitate the array/object, so the opposite. — jward01, Aug 06 '15 at 00:00
Well you tell JS to print out the object. You have to take out the fields manually (firstName, lastName, etc...). Write a function that does it for you. — synthomat, Aug 06 '15 at 00:00
I assumed that o is the list with all your records (allInfo). Is it? — synthomat, Aug 06 '15 at 00:02
@synthomat yes the o is my list (array) called allInfo. allInfo is an array that holds a list of objects. I wish to display all of the objects, and their properties/values in the array. — jward01, Aug 06 '15 at 00:04

score 2 · Accepted Answer · answered Aug 06 '15 at 00:18

Basically you have to iterate twice. First for single entries. Second for the fields.

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

see Fiddle

Just to get the idea. I'd suggest you learn functional programming. This can be done with less code when a library (underscore, lodash) is used ;-)

How to print an object (and its properties/values) to the DOM

1 Answers1