jQuery get json values

Question

I'm trying to fetch the last 3 blog posts with the draft = false for my system via jQuery json and following some tutorials if found online but without luck, and with the following keys:

"slug"
"updated"
"title"
"content"
"draft = false"

Here is the json output

{  
  "posts":[  
      {  
         "Blog":{  
            "id":"1252",
            "client_id":"1432",
            "slug":"my-blog-slug",
            "last_updated_by":"614",
            "draft":false,
            "created":"2014-09-17 11:18:39",
            "updated":"2014-09-17 11:18:39",
            "locale":"isl",
            "title":"This is the blog title",
            "content":"<p>My excellent content.<\/p>",
            "author":"John Doe"
         },
         "UpdatedBy":{  
            "id":"614",
            "name":"John Doe"
         }
      }
   ]
}

My current script is below, but i'm pretty sure that i'm doing a lot of things wrong.

<script>

    $(document).ready(function() {

            $.ajax({
                url: "blogs.json",
                dataType: "text",
                success: function(data) {

                    var json = $.parseJSON(data);
                    $('#results').html('Title: ' + json.created + '<br />Description: ' + json.content);
                }
            });

    });
</script>

<div id="results"></div>

Any help would be so much appreciated.

posts is array so to access first item you need to use index for example: $('#results').html('Title: ' + json.posts[0].Blog.created + '<br />Description: ' + json.posts[0].Blog.content); or loop — waldek_h
– waldek_h, Commented Sep 23, 2014 at 11:28

waldek_h · Accepted Answer · 2014-09-23 20:21:01Z

2

try this way:

JS

$(document).ready(function() {
    $.ajax({
        url: "blogs.json",
        dataType: "json",
        success: function(data) {
            var json = $.parseJSON(data);
            $.each(json.posts, function(){
                $('#results').html('Title: ' + this.Blog.title + '<br />Description: ' + this.Blog.content);
            });
        }
    });
});

Demo

answered Sep 23, 2014 at 20:21

waldek_h

9309 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhushan Kawadkar · Accepted Answer · 2014-09-23 12:08:32Z

0

Try this : posts is first key in json object and there could be multiple so access it using index, here it is zero. after getting posts, access each element by its key.

 var blog = json.posts[0]["Blog"];

 $('#results').html('Title: ' + blog["created"] + '<br />Description: ' + blog["content"]);

EDIT - as per OP comment, adding below code

$(document).ready( function() { 
 $.parseJSON("/blogs.json", function(data){
    var json = $.parseJSON(data);
    var blog = json.posts[0]["Blog"];   
    $.each(blog, function(){ 
      $("div#posts").append("<h1>Title: "+blog['title']+"</h1> <div class=\"post\">Content: "+blog['content']+"</div> <br />"); 
    }); 
 });

Demo

edited Sep 23, 2014 at 12:08

answered Sep 23, 2014 at 11:21

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

4 Comments

Jack Johnson Over a year ago

Still not able to get this to work with my code... any more complete example ?. Thanks, really appreciate any help on this...

Jack Johnson Over a year ago

Sorry i'm so new to this, what i'm trying to do is foreach 3 latest blog posts this way. <div id="posts"> <div class"post"> <h1>post.title</h1> <p class="date">12/12/2014</p> <p>Post Content</p> </div> </div>

Jack Johnson Over a year ago

My code now looks like this now $(document).ready( function() { $.parseJSON("/blogs.json", function(data){ $.each(posts[0]["Blog"], function(){ $("div#posts").append("<h1>Title: "+blog['title']+"</h1> <div class=\"post\">Content: "+blog['content']+"</div> <br />"); }); });

Jack Johnson Over a year ago

Now it only outputs. "); }); });

Collectives™ on Stack Overflow

jQuery get json values

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related