Using jQuery to grab data from JSON

Question

I haven't really looked into must jQuery + JSON . So heres my attempt.

I am wanting to pull data from: http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json which is an array of data for League Of Legends Runes. I am looking to get the name , description , image -> wyx and stats to be used in a project of mine.

I currently have this:

$(document).ready(function() {
    $.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(data){
        $.each(data, function (index, value) {
            console.log(value[5001]); //<--- this the ID for one of the runes, to test if it is working
        });
    });
});

This is the output:

As you can see, the name , description , image -> w, x, y and stats are shown, how would I get it to put these in the console (for chrome) for each one?

Hopefully you guys can help.

Answer 1

You're really close to getting what you need. The problem is the $.each loop is looping over several JSON keys/values before getting what you want.

A JSON object is accessed through dot notation and you can navigate down each level as shown below. Hope this helps.

$.getJSON("http://ddragon.leagueoflegends.com/cdn/4.14.2/data/en_US/rune.json", function(response){
    console.log(response); // Has keys for type, version, data, basic
    // Data is an array of elements
    console.log(response.data[5001]);
    // Each entry has properties you access like this.
    console.log(response.data[5001].name);
    console.log(response.data[5001].description);
    console.log(response.data[5001].image.x);
    console.log(response.data[5001].stats);
});

EDIT

To iterate over the data array you would do $.each over response.data

$.each(response.data, function (index, entry) {
   console.log(entry.name);
   console.log(entry.description);
});