Displaying all the items in an array using jquery and json

Question

I am trying to get all the items in an array to show using json and jquery from the song of ice and fire api. I can only get one item to show from each of the arrays.

Here is the codepen: https://codepen.io/frederickalcantara/pen/aWeXOz

var data;

$.getJSON(characters[i], function(json) {
    data = json;

    var alliance = $('#alliance');
    for (var i = 0; i < data.allegiances.length; i++) {
        if (i === data.allegiances.length - 1) {
            $.getJSON(data.allegiances[i], function(json1) {
               alliance.html(json1.name);
            });
        } else {
            $.getJSON(data.allegiances[i], function(json1) {
               alliance.html(json1.name + ', ');
            });
        }

    }

    const title = $('#title');

    if (data.titles.length === "") {
        return 'N/A';
    } else {
        for (i = 0; i < data.titles.length; i++) {

            if (i === data.titles.length - 1) {
                title.html(data.titles[i]);
            } else {
                title.html(data.titles[i]) + ', ';
            }

        }


    const tv = $('#seasons');

    for (var i = 0; i < data.tvSeries.length; i++) {
        if (i === data.tvSeries.length - 1) {
            tv.html(data.tvSeries[i]);
        } else {
            tv.html(data.tvSeries[i] + ', ');
        }
    }

    const actor = $('#actors')
    if (json.playedBy === "") {
        return 'N/A';
    } else {
        actor.html(json.playedBy);
    }

});

For which array though? Also, doesn't .append require that you attach an html element to it? I'm not trying to create any html elements, I already did my html on the html page lol. — freddyal
– freddyal, Commented Jun 1, 2017 at 0:33
.append will only create an HTML element if you pass HTML to it. Plain text is appended without creating an HTML element. (As a side note, if you didn't want to be appending HTML, you probably should have been using .text, but that's not actually what you need). — castletheperson
– castletheperson, Commented Jun 1, 2017 at 0:40

Vincent Ramdhanie · Accepted Answer · 2017-06-01 01:10:53Z

1

The main problem is your loop. You keep replacing the value in the html element until the last value in the array. You can simplify this code like this:

  title.html(data.titles.join(','));

which replaces all of this:

 for (i = 0; i < data.titles.length; i++) {

        if (i === data.titles.length - 1) {
            title.html(data.titles[i]);
        } else {
            title.html(data.titles[i]) + ', ';
        }

    }

Update: Handling the allegiances. Using a Promise here is important because you are making a number of AJAX calls and you need to be sure that they are resolved before attempting to display them. You can replace the entire for loop for the allegiances like this:

  Promise.all(data.allegiances.map(function(ally){
     return new Promise(function(resolve, reject){
         $.getJSON(ally, function(json) {
               resolve(json.name);
         });
     });
   }))
   .then(function(allies){
     alliance.html(allies.join(', '));
   });

edited Jun 1, 2017 at 1:10

answered Jun 1, 2017 at 0:36

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

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

4 Comments

freddyal Over a year ago

I use the conditional, because the last point in the array will include the comma which is something I don't want.

Vincent Ramdhanie Over a year ago

And the join() takes care of that. MDN Docs

freddyal Over a year ago

Ok, and what about the allegiance array? Since it uses json to get the name is there anything special I have to do or can I still use join() normally?

Vincent Ramdhanie Over a year ago

For that you may want to consider the map function. Also as you are making AJAX calls in that loop you may need to consider Promises to ensure that they all complete before moving on.

Collectives™ on Stack Overflow

Displaying all the items in an array using jquery and json

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related