Iterating through nested JSON files with no arrays

Question

The AJAX call below returns a JSON file with several JSON entries just like this, one after the other. I pulled these from the console. Note, the entries do not arrive in an array.

{"display_name":"ESL_SC2","_id":30220059,"name":"esl_sc2","type":"user","bio":"For standings, schedule, and results, visit http://www.intelextrememasters.com/","created_at":"2012-05-02T09:59:20Z","updated_at":"2017-12-12T19:05:29Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg","_links":{"self":"https://api.twitch.tv/kraken/users/esl_sc2"}}
{"display_name":"RobotCaleb","_id":54925078,"name":"robotcaleb","type":"user","bio":null,"created_at":"2014-01-13T04:07:33Z","updated_at":"2017-12-12T18:02:11Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/robotcaleb-profile_image-9422645f2f0f093c-300x300.png","_links":{"self":"https://api.twitch.tv/kraken/users/robotcaleb"}}

I am not interested in every key/property in every file, rather I only want a few of the values injected into the DOM.

Here is the JQ I have in place. It's the updateUserInfo function that is at issue. It fires for every key in every JSON file, which is what I wish to avoid.

           $(document).ready(function () {
                var streamersArr = ["ESL_SC2", "OgamingSC2", "cretetion", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
                  $("#all-btn").on("click", function () {
                    streamersArr.forEach(function(user) {
                        getUserInfo(user);
                        console.log(user);
                    });
                });

                function getUserInfo (user) {
                    $.ajax({
                        crossDomain: true,
                        dataType: "jsonp",
                        url: "https://wind-bow.gomix.me/twitch-api/users/" + user,
                        data: {
                            "stream_type": "all"
                        },
                        // take contents of JSON file from API and update html
                        success: function (json) {
                            console.log(JSON.stringify(json));
                            updateUserInfo(json);
                        },
                        // display when AJAX request fails
                        error: function () {
                            alert("AJAX user info request has failed!");
                        }
                    });
                }

                function updateUserInfo (json) {
                    var htmlMediaClass;
                    var htmlMediaBody;
                    Object.keys(json).forEach(function(key) {
                        htmlMediaClass += '<div class="media">';
                        htmlMediaClass += '<div class="media-left media-top">';
                        if (key.match(/_links.self/gi)){
                            htmlMediaClass = '<a href="' + json[key] + '"' + '>';
                        }
                        if (key.match(/logo/gi)){
                            htmlMediaClass = '<img class="media-object" src="' + json[key] + '"' + 'alt="user logo">';
                        }
                        htmlMediaClass += '</a>';
                        htmlMediaClass += '</div>';
                        htmlMediaBody += '<div class="media-body">';
                        htmlMediaBody += '<div class="row">';
                        htmlMediaBody += '<div class="col-md-4">';
                        if (key.match(/display_name/gi)){
                            htmlMediaBody = json[key];
                        }
                        htmlMediaBody += '</div>';
                        htmlMediaBody += '<div class="col-md-8">';
                        if (key.match(/bio/gi)){
                            htmlMediaBody = json[key];
                        }
                        htmlMediaBody += '</div>';
                        htmlMediaBody += '</div>';
                        var finalHTML = htmlMediaClass + htmlMediaBody;
                        updateDOM(finalHTML);
                    });
                }

                function updateDOM (html) {
                    $("#data-row").append(html);
                }

            });

Intervalia · Accepted Answer · 2017-12-12 20:47:52Z

1

If those values are showing up in a set of lines that represent a set of objects then you are not getting a true JSON file.

If the JSON file is correctly formatted then consider creating an array that contains the keys you care about like this:

var myKeys = ["display_name","_id","type","logo"];

and iterate through that instead of the entire object.

myKeys.forEach(function(key) {
  // Your code here

answered Dec 12, 2017 at 20:47

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

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

Comments

Rogier Slag · Accepted Answer · 2017-12-12 20:48:09Z

1

The file format you are receiving is called JSON Lines. You can convert this format to an array manually relatively easy

const input = ...; // This is the string which is encoded as a json object per line
const array = input.split('\n').map(function(line) { return JSON.parse(line);});

Basically you create an array where each line of the original is now an entry of the array. You then map each value from a String to an object.

In your method, you can loop over the resulting array

answered Dec 12, 2017 at 20:48

Rogier Slag

5263 silver badges7 bronze badges

Collectives™ on Stack Overflow

Iterating through nested JSON files with no arrays

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related