What is the best way to combine JS Objects and print them back out?

Question

I tried to stored 2 JS objects : A, and B , in a variable called data .

---

JS

var data = {

      "A":{"section_num":"2.2", "problem_set":"Same", "start_time":"7/20/2015 10:00 am", "student_am":"9", "due_time":"7/20/2015 11:00 am", "submit":"9", "avg_score":"71", "danger":"5", "danger_list":"5,10,15,19,23", "warning":"8", "warning_list":"3,7,11,13,14,16,21,22", "success":"12", "success_list":"1,2,4,6,8,9,12,17,18,20,24,25"},

      "B":{"section_num":"2.3", "problem_set":"Not the same", "start_time":"6/19/2015 1:00 pm", "student_am":"23", "due_time":"6/19/2015 2:00 pm", "submit":"7", "avg_score":"82", "danger":"10", "danger_list":"11,12,13,14,15,16,17,18,19,20", "warning":"10", "warning_list":"1,2,3,4,5,6,7,8,9,10", "success":"5", "success_list":"21,21,23,24,25"}

};


 var print_a = document.getElementById("print_a");
 var print_b = document.getElementById("print_b");



print_a.html(data.A.start_time);
print_b.innnerHTML = data.B.start_time;
print_a.text(data.A.start_time);

---

HTML

<h1 id="print_a"> </h1>
<h1 id="print_b"> </h1>

---

I just want to print them back out. I've tried using the dot notation to access them. But nothing is printing out at the moment.

0 error is in the console.

What did I do wrong ?

Any hints / suggestions ?

If you need it - here is Fiddle

Answer 1

Functions like html() and text() are present in jQuery but not native JavaScript. If I remove those from your JSFiddle, I do get output. I was easily able to detect this was the problem by opening up the Chrome dev tools while on your JSFiddle and pressing run -- there were errors logged to the console.

Here is the updated JSFiddle: http://jsfiddle.net/4yw6cbf2/3/

There is not a standard way to print anonymous objects. If you have a class and are making instances of the class, you can add a toString method. One issue is that an object has keys and values and the keys are not ordered. You can access the keys with Object.keys(myObject) which will return an array. Then you can iterate over the array and print out the key and the value.

Here is an example of that:

var span = document.getElementById('output');

var myObject = {
    a: 10,
    b: 'cat',
    c: 'San Francisco'
};

span.innerHTML = Object.keys(myObject).map(function(key) {
    return key + ': ' + myObject[key];
}).join(', ');

JSFiddle: http://jsfiddle.net/e4vjvc8d/

For me, on latest Google Chrome on OS X, it prints out in the order of a, b, c but that order is not guaranteed and it is important to remember that.

If you only want a printable object, you can also serialize the object to JSON with JSON.stringify . That will give you an output like this for the above example object:

'{"a":10,"b":"cat","c":"San Francisco"}'

Reference: MDN on JSON

Answer 2

I would recommend using elem.textContent

// example: dump entire object contents using JSON.stringify
print_a.textContent = JSON.stringify(data.A);
print_b.textContent = JSON.stringify(data.B);

Click Run code snippet below to see it work

 var data = { "A":{"section_num":"2.2", "problem_set":"Same", "start_time":"7/20/2015 10:00 am", "student_am":"9", "due_time":"7/20/2015 11:00 am", "submit":"9", "avg_score":"71", "danger":"5", "danger_list":"5,10,15,19,23", "warning":"8", "warning_list":"3,7,11,13,14,16,21,22", "success":"12", "success_list":"1,2,4,6,8,9,12,17,18,20,24,25"}, "B":{"section_num":"2.3", "problem_set":"Not the same", "start_time":"6/19/2015 1:00 pm", "student_am":"23", "due_time":"6/19/2015 2:00 pm", "submit":"7", "avg_score":"82", "danger":"10", "danger_list":"11,12,13,14,15,16,17,18,19,20", "warning":"10", "warning_list":"1,2,3,4,5,6,7,8,9,10", "success":"5", "success_list":"21,21,23,24,25"} }; var print_a = document.getElementById("print_a"); var print_b = document.getElementById("print_b"); print_a.textContent = data.A.start_time; print_b.textContent = data.B.start_time; 

 div { background-color: #fafafa; padding: 10px; margin: 0 0 10px; font-family: monospace; white-space: pre-wrap; } 

 <div id="print_a"></div> <div id="print_b"></div>