Displaying json arrays with jQuery .each

Question

I have a json file that I want to pull data from. When the json file is not in an array than everything works just fine. I guess the problem is that I do not know how to select the correct data in my .each function. Here is the example json file:

{
   "chapter1": [
      {
         "title":"This is the title",
         "chapter":"1",
         "verse":"1",
         "text":"text goes here"
      },
      {
         "verse":"4",
         "text":"text goes here"
      },
      {
         "verse":"6",
         "text":"text goes here"
      }
   ],

   "chapter2": [
      {
         "title":"This is the title",
         "chapter":"2",
         "verse":"1",
         "text":"text goes here"
      },
      {
         "verse":"4",
         "text":"text goes here"
      },
      {
         "verse":"6",
         "text":"text goes here"
      }
   ]
}

Here is my loop to display the data:

$.getJSON(passages, function(data) {
    $.each(data, function() {
        $('#chapter1 h2').append(this.title);
        $('#chapter1 h3').append(this.chapter);
        $('#verses').append('<li><p>' + this.verse + this.text + '</p></li>');    
    });
});

When I remove the "chapter2" data from the json file, than everything works just fine. I would like to display the "chapter1" contents and the "chapter2" contents.

What are you using to create the JSON, because it seems like there is some inconsistency there — Explosion Pills
– Explosion Pills, Commented Dec 6, 2012 at 17:52

Explosion Pills · Accepted Answer · 2012-12-06 17:54:29Z

1

For some reason, it's creating an array around members of each element. Assuming this is consistent, you can access title and chapter like so:

$("#chapter1 h2").append(this[0].title);
$("#chapter1 h3").append(this[0].chapter);

EDIT: If you are creating the JSON yourself you should probably change its format to something like this:

"chapter": {
   "title": "the title",
   "chapter": "the chapter",
   "verses": [
      {"verse": "1", "text": "text 1"},
      {"verse": "4", "text": "text 2"}
   ]
}

This will work with the $.each in your question

answered Dec 6, 2012 at 17:54

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user715564 Over a year ago

So I reformatted the json data like you suggested and now nothing is showing up. Am I suppose to change something in my $.each statement?

Explosion Pills Over a year ago

@user715564 what do you mean "nothing is showing up?" Do you get an error?

user715564 Over a year ago

Haha that's what I mean. Nothing is showing up in the specified divs in the $.each statement. The data is not being displayed. I don't see any errors in the console. Either way, your first suggestion worked. I can go ahead and go that route for now and work on formatting later. Thanks for the help!

Marcelo Biffara · Accepted Answer · 2012-12-06 18:37:26Z

0

the json is malformed, json for each chapter should look something like this:

    "chapter1": {
       "title":"this is the title",
       "chapter":"1",
       "verses":[
          {
             "verse":"1",
             "text":"some text"
          },
          {
             "verse":"2",
             "text":"some other text"
          },
      ]
   }

EDIT: After you change your JSON, you code should look somthing like this:

$.getJSON(passages, function(data) {
    $.each(data, function() {
        $('#chapter1 h2').append(this.title);
        $('#chapter1 h3').append(this.chapter);
        $.each(this.verses,function(){
           $('#verses').append('<li><p>' + this.verse + this.text + '</p></li>');     
        });
    });
});

edited Dec 6, 2012 at 18:37

answered Dec 6, 2012 at 18:13

Marcelo Biffara

8314 silver badges8 bronze badges

2 Comments

user715564 Over a year ago

That still doesn't work with my $.each statement though? the data isn't displayed and there are no errors in the console

Marcelo Biffara Over a year ago

that is because you have to change your code so that it also iterates each chapter verse, inside the each for the chapters, you need another each for the verses

Collectives™ on Stack Overflow

Displaying json arrays with jQuery .each

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related