JSON How to correctly parse a nested JSON?

Question

I am trying to parse nested JSON objects inside my html div. I am trying to get the TITLE for each object. I want it to be as DRY (don't repeat yourself) as possible so whenever I add a new object to the json It will automatically parse the object inside the div.

I don't know if this is the correct syntax for this

Object.keys(booklist.Bible)[1].Title

when I try to use this code it returns undefined.

<script>
var booklist = {
"Bible":{
"ARV":{"Title":"American Revised Version", "Author":"Unknown", "Icon":"ARV.png"},
"KJV":{"Title":"King James Version", "Author":"King James", "Icon":"KJV.png"},
},

"Bible Commentary":{
"DR":{"Title":"The Prophecies of Daniel and the Revelation by Uriah Smith", "Author":"Uriah Smith", "Icon":"DR.png"},
"EGWBC":{"Title":"Ellen G. White Bible Commentary", "Author":"Ellen G. White", "Icon":"EGWBC.png"}
},

var contents = Object.keys(booklist.Bible)[0];
var catList = document.getElementById('contents');
var category = document.createElement('div');
category.innerHTML='<div class="row">'+
                    '<div class="inline ui-block-a">'+
                        '<img class="thumbs" src="images/default.png">'+
                    '</div>'+
                    '<div class="inline ui-block-b">'+
                        '<h4>'+Object.keys(booklist.Bible)[1].Title+'</h4>'+
                        '<span class="subs"></span>'+
                    '</div>'+
                    '<div class="inline ui-block-c">'+
                        '<h4></h4>'+
                        '<span class="subs">Author</span>'+
                    '</div>'+
                '</div><hr>';
          catList.appendChild(category);
</script>

It seems you don't know what the return value of `Object.keys` actually is. I highly recommend to always read the documentation before you use an unfamiliar function! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys — Felix Kling, Mar 13 '16 at 10:49

score 0 · Answer 1 · answered Mar 13 '16 at 10:46

0

If you want to access the Title of book ARV , you could access like

booklist.Bible.ARV.Title

or

booklist["Bible"]["ARV"]["Title"]

It is this simple in javascript.

answered Mar 13 '16 at 10:46

Raghavan

883
1
8
19

yes but I want to access all not just the ARV.. how can I do it? – Kim Carlo Mar 13 '16 at 10:50
This question is marked as duplicate , pls refer to the already answered question which contains more detailed answer . – Raghavan Mar 13 '16 at 10:52

JSON How to correctly parse a nested JSON?

1 Answers1