{"id":1228,"date":"2022-08-30T15:14:31","date_gmt":"2022-08-30T15:14:31","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/10\/trying-to-get-json-data-with-jquery-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:14:31","modified_gmt":"2022-08-30T15:14:31","slug":"trying-to-get-json-data-with-jquery-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/trying-to-get-json-data-with-jquery-collection-of-common-programming-errors\/","title":{"rendered":"Trying to get json data with jquery-Collection of common programming errors"},"content":{"rendered":"

i am outputting json data from a php file (example of my output)<\/p>\n

{\"news\":[{\"title\":\"title news example1\",\"content\":\"blabla bla 1\",\"img\":\"url\"},\n{\"title\":\"title news example2\",\"content\":\"blabla bla 2\",\"img\":\"url2\"},\n{\"title\":\"title news example3\",\"content\":\"blabla bla 3\",\"img\":\"url3\"},\n{\"title\":\"title news example4\",\"content\":\"blabla bla 4\",\"img\":\"url4\"}]}\n<\/code><\/pre>\n
how can i show all these data to div #news using jquery getjson or get and using each?<\/p>\n
    \n
  1. \n
    This will use jQuery’s append()<\/code> method to add an h2<\/code> and p<\/code> tag for each article to the #news<\/code> div. Obviously, you can customize the $.each<\/code> callback as you need.<\/p>\n
    Update<\/em> the reason for your undefined errors was because the callback for the each()<\/code> method was missing the index of the array as the first parameter. I updated my example appropriately.<\/p>\n
    \n  jQuery(function($){\n    $.getJSON('uri\/to\/file.php', function(data) {\n      $.each(data['news'], function(i, article){\n        $('#news').append('<\/code><\/pre>\n
    ' + article['title'] + '<\/code><\/h2>\n

    ' + article['content'] + '');\n      });\n    });\n  });\n\n<\/pre>\n<\/li>\n
  2. \n
    I solved it this way, by puttin the content of title and content in a new var, i dont know why the fist way was not working, but this way work perfectly :)<\/code><\/p>\n
    Query(function($){\n    $.getJSON('file.php', function(data) {\n        $.each(data['news'], function(i,row){\n        var titulli = row.title;\n        var contenti = row.content;\n    $('#news').append('<\/code><\/code><\/pre>\n
    ' + title + '<\/code><\/h2>\n

    ' + content + '');\n\n\n      });\n    });\n  });   \n<\/pre>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-10 00:10:56. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    i am outputting json data from a php file (example of my output) {“news”:[{“title”:”title news example1″,”content”:”blabla bla 1″,”img”:”url”}, {“title”:”title news example2″,”content”:”blabla bla 2″,”img”:”url2″}, {“title”:”title news example3″,”content”:”blabla bla 3″,”img”:”url3″}, {“title”:”title news example4″,”content”:”blabla bla 4″,”img”:”url4″}]} how can i show all these data to div #news using jquery getjson or get and using each? This will use jQuery’s […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1228","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1228"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1228\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}