JSON forEach() and function as a argument explanation

Question

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);

Surely not the "whole web", if you look at the docs for [`$.getJSON`](http://api.jquery.com/jquery.getjson/) and [`Array.forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) you'll find the answers immediately — adeneo, Nov 23 '16 at 18:25

score 1 · Accepted Answer · answered Aug 01 '17 at 17:33

$.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
    });

score 0 · Answer 2 · answered Nov 23 '16 at 18:25

0

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

answered Nov 23 '16 at 18:25

curv

3,796
4
33
48

score 0 · Answer 3 · answered Nov 23 '16 at 18:26

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.

score 0 · Answer 4 · edited May 23 '17 at 11:53

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?.

JSON forEach() and function as a argument explanation

4 Answers4