CODEWITHSUNDEEP
javascriptjqueryforeachgetjson
user6951244
user6951244

Reputation:

JSON forEach() and function as a argument explanation

What is function(json) json argument, is it the sample.json file? And what is val argument? How var keys looks like in some examples? How does function as argument works in this sample code?

$.getJSON("sample.json", function(json) {

    json.forEach(function(val) {
    var keys = Object.keys(val);

Upvotes: 0

Views: 1919

Answers (4)

León Silva
León Silva

Reputation: 408

$.getJSON("sample.json", function(json) {

$.getJSON gets a json document called "sample.json", this document is allocated in the "json" variable wich is inside your function.

json.forEach(function(val) {

As JSON is "JavaScript Object Notation", we know that your variable json is an object, that's why you can use the function Object.forEach(), It works as a for..in.., 

var keys = Object.keys(val);

Object.keys(val) here, your variable val must be an object or array, and this method will return all the indexes in your object/array (val), therefore, all the indexes inside the json you bringed in the document "sample.json", will be added to your variable keys.

For example:

$.getJSON("/json/sample.json", function(json) {

    var html = "";

    json.forEach(function(val) { // Iterates in the json
      var keys = Object.keys(val); // Assignes the indexes to the var keys

      html += "<div>"; // Opens and appends a div element

      keys.forEach(function(key) { // Appends the element of the object/array at each index (key)
        html += "<strong>" + key + "</strong>"
      });

      html += "</div><br>"; // Closes the div element and starts a new line
    });

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074248

In that example, json is an argument name for the first argument that will be passed to the getJSON callback. That will be the result of parsing the JSON (and so won't be JSON anymore, it'll be an object graph).

The code is expecting that the JSON defines an array as the top-level item, and is calling Array.prototype.forEach. The val argument — forEach's first argument — will be each element in that array in order.

More in the jQuery documentation, on MDN, and in For-each over an array in JavaScript?.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65806

The result of the JQuery $.getJSON() method is a JavaScript Object Notation structure. That response is automatically passed to the supplied success callback function as the first argument (json in this case). It doesn't have to be called json, that's just an arbitrary name for the argument, you can call it any legal identifier.

After receiving the argument, the structure is then traversed with a .forEach() where another function is supplied as a callback for each item traversed.

Here is the documentation for JQuery's getJSON method.

Upvotes: 0

curv
curv

Reputation: 3844

The function is just a callback, so once the sample.json file has been fetched and parsed it will run the code within the function, using 'json' as the reference variable

Upvotes: 0

Related Questions