Listing the object inside the listed array of json

Question

I'm trying to list my JSON array from a file using jquery $.getJSON

Here is what I have for now:

(document).ready(function() {
    var theAPI = "test.js";

    $("button").click(function() {
        $.getJSON(theAPI, function(result) {
            $.each(result, function(i, field) {
                $("div").append(i + " - - - " + field + "<br/>");
            });
        });
    });
});

and my output is:

kind - - - mykind

nextPageToken - - - CAUQAA

pageInfo - - - [object Object]

How do I append this [object Object]? here is the test.js:

{
 "kind": "mykind",
 "nextPageToken": "CAUQAA",

 "pageInfo": {

  "totalResults": 1691,
  "resultsPerPage": 5
 }

}

UPDATE JSON.stringify() is not an answer, I want to list every json object.

mplungjan · Answer 1 · 2015-06-17T13:55:47.823

If there is only one level of nesting you can do

$("button").click(function(){
  $.getJSON(theAPI, function(result){
    $.each(result, function(key, value){
      if (key=="pageInfo") { // or typeof value=="object"
        $.each(value, function(pKey, pValue){  
          $("div").append(pKey+ " - - - " +pValue + "<br/>");
        });
      }
      else {
          $("div").append(key+ " - - - " +value + "<br/>");
      }
    });

  });
});

otherwise you will need to recourse

Example:

var result = {

  "kind": "mykind",

  "lineInfo": {
    "totalLineResults": 691,
    "resultsPerLine": 9
  },

  "nextPageToken": "CAUQAA",

  "pageInfo": {
    "totalResults": 1691,
    "resultsPerPage": 5
  }
}

$.each(result, function(key, value) {
  if (typeof value=="object") {
    $("div").append(key + "<ul>");
    $.each(value, function(pKey, pValue) {
      $("div").append("<li>"+pKey + " - - - " + pValue + "</li>");
    });
    $("div").append("</ul>");
  } else {
    $("div").append(key + " - - - " + value + "<br/>");
  }
});

ul { display:inline }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

YOU ARE AWESOME! thanks man :) i totally forgot about the loop inside the loop :) — The Bumpaster, Jun 17 '15 at 13:02
What if I have more than one object? is there a way to list all objects like this? — The Bumpaster, Jun 17 '15 at 13:39

score 1 · Accepted Answer · answered Jun 18 '15 at 09:15

I believe a generic solution to this would be great because sometime in the future your JSON structure might change and become more complex.

Hence, I have attempted to come up with a generic solution here

var result = {
    "key-1": "value-1",
    "key-2": "value-2",
    "key-3": {
        "key-31": "value-31",
        "key-32": "value-32",
        "key-33": ["value-331", "value-332", "value-333"],
        "key-34": {
            "key-341": 341,
            "key-342": 342,
            "key-343": [3431],
            "key-344": true,
            "key-345": false,
            "key-346": {
                "key-3461": [3461, "value-3462", true, false]
            }
        }
    },
    "key-4": "value-4",
    "key-5": ["value-51", "value-52"],
    "key-6": {
        "key-61": "value-61",
        "key-62": ["value-621", "value-622"],
        "key-63": {
            "key-631": "value-631",
            "key-632": true,
            "key-633": false
        }
    },
    "key-7": function() {
        console.log("I am a function...");
    }
};

var tabCount = 0,
    typeMap = {
        "STRING": "[object String]",
        "NUMBER": "[object Number]",
        "BOOLEAN": "[object Boolean]",
        "ARRAY": "[object Array]",
        "OBJECT": "[object Object]",
        "FUNCTION": "[object Function]"
    },
    getTypeOfObject = function(o) {
        return Object.prototype.toString.call(o);
    },
    getTabSpacing = function(numberOfTabs) {
        var tab = "&nbsp;&nbsp;&nbsp;&nbsp;",
            result = "";
        for(var index = 0; index < numberOfTabs; index++) {
            result += tab;
        }
        return result;
    },
    iterator = function(obj, tab) {
        $.each(obj, function(key, value) {
            if(getTypeOfObject(value) === typeMap.OBJECT) {
                $("div").append(getTabSpacing(tab) + key + ":<br/>");
                iterator(value, ++tabCount);
                --tabCount;
            }
            else {
                $("div").append(getTabSpacing(tab) + key + ": " + value + "<br/>");
            }
        });    
    };

iterator(result, tabCount);

I am not sure if this is what you were looking for.

Elegant but in my opinion way over the top given the JSON in the original question. — mplungjan, Jun 18 '15 at 14:33

pinturic · Answer 3 · 2015-06-17T12:42:53.910

0

You can stringify it like this (here is the jsfiddle):

$(document).ready(function(){
var theAPI = "test.js";
$("button").click(function(){
    $.getJSON(theAPI, function(result){
        $.each(result, function(i, field){
            $("div").append(i+ " - - - " +JSON.stringify(field)+ "<br/>");
        });
    });
});
});

edited Jun 17 '15 at 12:42

answered Jun 17 '15 at 12:39

pinturic

2,253
1
17
34

Yeah, it worked, but how can I access now just one property of it? I just want to append total results – The Bumpaster Jun 17 '15 at 12:42
1

I cannot understand your question. – pinturic Jun 17 '15 at 12:44
I don't want these "" around the data inside test.js. is there something like append(i, field.pageinfo); – The Bumpaster Jun 17 '15 at 12:47

score 0 · Answer 4 · answered Jun 17 '15 at 12:40

0

User JSON.stringify()

$("button").click(function(){
    $.getJSON(theAPI, function(result){
        $.each(result, function(i, field){
            $("div").append(i+ " - - - " +JSON.stringify(field) + "<br/>");
        });
    });
});

answered Jun 17 '15 at 12:40

Christoph

1,993
1
25
33

Listing the object inside the listed array of json

4 Answers4