Parsing Through JSON Response From AJAX Call

Question

Hi, I'm trying to display a list of all of my blog post titles and the date it was created. I've tried several different methods, and have received some weird data.

This is my AJAX call:

 $.ajax({
url: "../cockpit/rest/api/collections/get/Blog?token=xxxxx ", 
type:"GET", 
dataType: 'JSON', 
success: function(data){

  $.each(data, function() {
    $.each(this, function(k, v) {
        console.log(this)
    });
  });
}});

In my console, I viewed the Object drop down to get an idea of what the responseText is:

[{"image":[],"other":[],"tags":[],"title":"First Blog!","content":"this is my first blog","time":"01:00","modified":1437401421,"_uid":"55a93c6eeae12doc679065632","created":1437185509,"_id":"55a9b5e57d566doc921869486","custom-order":1},{"image":[],"other":[],"tags":[],"title":"second post","content":"this is a test","time":"02:00","modified":1437401420,"_uid":"55a93c6eeae12doc679065632","created":1437190765,"_id":"55a9ca6d51ad8doc92301834","custom-order":0}]

This is where it gets weird. This is the response I get from console.log(this):

[]
VM991:6 []
VM991:6 []
VM991:6 String {0: "F", 1: "i", 2: "r", 3: "s", 4: "t", 5: " ", 6: "B", 7: "l", 8: "o", 9: "g", 10: "!", length: 11, [[PrimitiveValue]]: "First Blog!"}
VM991:6 String {0: "t", 1: "h", 2: "i", 3: "s", 4: " ", 5: "i", 6: "s", 7: " ", 8: "m", 9: "y", 10: " ", 11: "f", 12: "i", 13: "r", 14: "s", 15: "t", 16: " ", 17: "b", 18: "l", 19: "o", 20: "g", length: 21, [[PrimitiveValue]]: "this is my first blog"}
VM991:6 String {0: "0", 1: "1", 2: ":", 3: "0", 4: "0", length: 5, [[PrimitiveValue]]: "01:00"}
VM991:6 Number {[[PrimitiveValue]]: 1437401421}
VM991:6 String {0: "5", 1: "5", 2: "a", 3: "9", 4: "3", 5: "c", 6: "6", 7: "e", 8: "e", 9: "a", 10: "e", 11: "1", 12: "2", 13: "d", 14: "o", 15: "c", 16: "6", 17: "7", 18: "9", 19: "0", 20: "6", 21: "5", 22: "6", 23: "3", 24: "2", length: 25, [[PrimitiveValue]]: "55a93c6eeae12doc679065632"}
VM991:6 Number {[[PrimitiveValue]]: 1437185509}
VM991:6 String {0: "5", 1: "5", 2: "a", 3: "9", 4: "b", 5: "5", 6: "e", 7: "5", 8: "7", 9: "d", 10: "5", 11: "6", 12: "6", 13: "d", 14: "o", 15: "c", 16: "9", 17: "2", 18: "1", 19: "8", 20: "6", 21: "9", 22: "4", 23: "8", 24: "6", length: 25, [[PrimitiveValue]]: "55a9b5e57d566doc921869486"}
VM991:6 Number {[[PrimitiveValue]]: 1}
VM991:6 []
VM991:6 []
VM991:6 []
VM991:6 String {0: "s", 1: "e", 2: "c", 3: "o", 4: "n", 5: "d", 6: " ", 7: "p", 8: "o", 9: "s", 10: "t", length: 11, [[PrimitiveValue]]: "second post"}
VM991:6 String {0: "t", 1: "h", 2: "i", 3: "s", 4: " ", 5: "i", 6: "s", 7: " ", 8: "a", 9: " ", 10: "t", 11: "e", 12: "s", 13: "t", length: 14, [[PrimitiveValue]]: "this is a test"}
VM991:6 String {0: "0", 1: "2", 2: ":", 3: "0", 4: "0", length: 5, [[PrimitiveValue]]: "02:00"}
VM991:6 Number {[[PrimitiveValue]]: 1437401420}
VM991:6 String {0: "5", 1: "5", 2: "a", 3: "9", 4: "3", 5: "c", 6: "6", 7: "e", 8: "e", 9: "a", 10: "e", 11: "1", 12: "2", 13: "d", 14: "o", 15: "c", 16: "6", 17: "7", 18: "9", 19: "0", 20: "6", 21: "5", 22: "6", 23: "3", 24: "2", length: 25, [[PrimitiveValue]]: "55a93c6eeae12doc679065632"}
VM991:6 Number {[[PrimitiveValue]]: 1437190765}
VM991:6 String {0: "5", 1: "5", 2: "a", 3: "9", 4: "c", 5: "a", 6: "6", 7: "d", 8: "5", 9: "1", 10: "a", 11: "d", 12: "8", 13: "d", 14: "o", 15: "c", 16: "9", 17: "2", 18: "3", 19: "0", 20: "1", 21: "8", 22: "3", 23: "4", length: 24, [[PrimitiveValue]]: "55a9ca6d51ad8doc92301834"}
VM991:6 Number {[[PrimitiveValue]]: 0}

I've tried to console.log(this.title), console.log(this['title']), all to no avail. I'm unsure why my data is getting split up, and really unsure as to why this.title will not work. does anyone have an idea as to why this is happening?!

Answer 1 · 2015-07-20T14:58:24Z

July 20, 2015 2:58pm

I think it's your each loop structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script>


        var data = [{"image":[],"other":[],"tags":[],"title":"First Blog!","content":"this is my first blog","time":"01:00","modified":1437401421,"_uid":"55a93c6eeae12doc679065632","created":1437185509,"_id":"55a9b5e57d566doc921869486","custom-order":1},{"image":[],"other":[],"tags":[],"title":"second post","content":"this is a test","time":"02:00","modified":1437401420,"_uid":"55a93c6eeae12doc679065632","created":1437190765,"_id":"55a9ca6d51ad8doc92301834","custom-order":0}];

        //do this
        $.each(data, function(index, post) {
            console.log( post.title );
        });

        // not this
        /* ---------------------------
        $.each(data, function() {
            $.each(this, function(k, v) {
                console.log(this)
            });
        });
        -------------------------------
        */


    </script>
</body>
</html>

Answer 2 · 2015-07-20T15:27:30Z

July 20, 2015 3:27pm

that's it! thanks so much!!

Welcome to the Treehouse Community

Looking to learn something new?

Angelina Bethoney

Angelina Bethoney

Parsing Through JSON Response From AJAX Call

2 Answers

LaVaughn Haynes

LaVaughn Haynes

Angelina Bethoney

Angelina Bethoney