How to Parse json output from URL

Question

I'm trying to parse a json request from an URL in jQuery but can't seem to get it right.

Below is what I have, but it's not working. I'm trying to parse the post_title and content and output it into a div using the getElementById method.

Below is the code and the Json request.

        <div id="test"></div>
    <span>This is cool.</span>

<script>
jQuery(document).ready(function($) {
  $.ajax({
  url : "https//website-API-json.com/string",
  dataType : "jsonp",
  success : function(parsed_json) {
  var title = parsed_json{result"result"[{"post_title"}};
  var content = parsed_json['result']['']['post_content'];

      document.getElementById("test").innerHTML = 'div class:"post_title"> ' + title + ' </div><br><div class:"post_content"> ' + content '</div>'
  }


  });
});

And here's the Json request result

result({
   "respond":1,
   "paging":{
      "stillmore":0,
      "perpage":10,
      "callpage":1,
      "next":2,
      "previous":0,
      "pages":1,
      "result":"1"
   },
   "message":"",
   "result":[
      {
         "ID":"2003",
         "post_title":"Higher Grounds Coffee Shop",
         "guid":"",
         "post_content":"\"spring fever has hit the high country, stop in for a refreshing frappe, smoothie or a delicious milkshake\"",
         "post_author":"2",
         "post_excerpt":"",
         "post_date":"May 1, 2015",
         "post_date_gmt":"May 2, 2015",
         "comment_status":"open",
         "ping_status":"open",
         "post_name":"201-new-market-centre-boone-nc-28607-united-states-higher-grounds-coffee-shop",
         "post_modified":"May 1, 2015",
         "post_modified_gmt":"May 2, 2015",
         "post_content_filtered":"",
         "post_parent":"0",
         "menu_order":"0",
         "comment_count":"3",
         "featuredimage":"",
         "featuredthumb":"",
         "taxonomies":{
            "job_listing_region":[
               {
                  "id":"157",
                  "name":"Charlotte",
                  "slug":"charlotte-nc",
                  "description":"",
                  "count":"1",
                  "parent":"104",
                  "image":"",
                  "custom_fields":[

                  ]
               }
            ]
         },
         "category":[

         ],
         "tags":[

         ],
         "author":[
            {
               "ID":"2",
               "user_login":"Eric",
               "user_nicename":"ericgriffin",
               "user_email":"",
               "user_url":"",
               "user_registered":"May 15, 2015",
               "display_name":"Eric",
               "role":{
                  "customer":true
               },
               "first_name":"Eric",
               "last_name":"Griffin",
               "nickname":"EricGriffin",
               "description":"",
               "avatar":"",
               "aim":"",
               "jabber":"",
               "yim":"",
               "custom_fields":{
                  "company_name":"",
                  "avatar":"",
                  "hasbeensetup":"IsSetup"
               }
            }
         ],
         "post_format":false,
         "custom_fields":{
            "favorites":"0"
         }
      }
   ]
})

Any help would be greatly appreciative. I'm trying to extract the post_title and post_content.

This line seems very broken: var title = parsed_json{result"result"[{"post_title"}}; Try parsed_json.result instead of parsed_json{result} etc. — ray
– ray, Commented May 24, 2015 at 2:26
parsed_json{result"result"[{"post_title"}} isn't any kind of JavaScript I know of. — Sukima
– Sukima, Commented May 24, 2015 at 2:55

Sukima · Accepted Answer · 2015-05-24 02:40:22Z

1

Use jQuery.getJSON(). It parses JSON for you. Also I've always felt the success callback annoying and ugly: Here is what I would do:

function appendPost(__, post) {
  var title = $('<div/>')
    .addClass('post_title')
    .text(post.post_title);
  var content = $('<div/>')
    .addClass('post_content')
    .text(post.post_content);
  $('#test')
    .append(title)
    .append('<br/>')
    .append(content);
}

function processResults(parsed_json) {
  var posts = parsed_json.result || [];
  $('#test').empty();
  $.each(posts, appendPost);
}

jQuery(document).ready(function($) {
  $.getJSON("https//website-API-json.com/string")
    .then(processResults);
});

edited May 24, 2015 at 2:40

answered May 24, 2015 at 2:26

Sukima

10.1k4 gold badges48 silver badges60 bronze badges

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

3 Comments

Wesley Smith Over a year ago

Seems part of your answer is missing

Sukima Over a year ago

Fixed. Have to get answers in fast while editing code. Much of stack overflow is a race.

Eric S Griffin Over a year ago

Very nice! Thanks so much for your help!

Collectives™ on Stack Overflow

How to Parse json output from URL

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related