{"id":615,"date":"2015-04-16T09:26:06","date_gmt":"2015-04-16T09:26:06","guid":{"rendered":"http:\/\/www.andreagirardi.it\/blog\/?p=615"},"modified":"2015-07-05T14:45:23","modified_gmt":"2015-07-05T14:45:23","slug":"parse-and-unknown-json-with-jquery","status":"publish","type":"post","link":"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/","title":{"rendered":"Parse an unknown JSON with Jquery"},"content":{"rendered":"<p>Sometime it happens to receive a JSON string than need to be visualized without knowing the structure. Suppose we have an HTML table:<\/p>\n<pre lang=\"html\">\r\n<tbody id=\"reportTable\">\t\t\t\t\t\r\n<\/tbody>\r\n<\/pre>\n<p>To populate this table with jQuery it&#8217;s possible to use this simple code:<\/p>\n<pre lang=\"javascript\">\r\nvar rows = ${reportRows};\r\nvar html = $.each(rows, function(key, value){\r\n\r\n\t$(\"#reportTable\").append(\"<tr>\");\r\n\r\n\t$.each(value, function (key, data) {\r\n\t\t$(\"#reportTable\").append(\"<td>\" + data + \"<\/td>\");\r\n\t});\r\n\t \r\n\t$(\"#reportTable\").append(\"<\/tr>\");\r\n\r\n});\r\n<\/pre>\n<p><strong>${reportRows}<\/strong> comes from a Spring MVC Controller and it&#8217;s a Java string generates using Jackson (or Gson) in this way:<\/p>\n<pre lang=\"java\">\r\nColumnMapRowMapper rowMapper = new ColumnMapRowMapper();\r\nList<Map<String, Object>> reportDataList =  getJdbcTemplate().query(sqlComplete, rowMapper);\r\n\t\t\t \r\nObjectWriter ow = new ObjectMapper().writer().withDefaultPrettyPrinter();\r\nString json = ow.writeValueAsString(reportDataList);\r\n<\/pre>\n<p>So, we have a query that return a not know number of column (suppose your code dynamically generate the query), we translate the results in JSON and we use jQuery to render the results.<\/p>\n<p>[AdSense-A]<\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing\"><h3 class=\"sd-title\">Share this:<\/h3><div class=\"sd-content\"><ul><li class=\"share-linkedin\"><a rel=\"nofollow\" data-shared=\"sharing-linkedin-615\" class=\"share-linkedin sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=linkedin\" target=\"_blank\" title=\"Click to share on LinkedIn\"><span>LinkedIn<\/span><\/a><\/li><li class=\"share-reddit\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-reddit sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=reddit\" target=\"_blank\" title=\"Click to share on Reddit\"><span>Reddit<\/span><\/a><\/li><li class=\"share-twitter\"><a rel=\"nofollow\" data-shared=\"sharing-twitter-615\" class=\"share-twitter sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=twitter\" target=\"_blank\" title=\"Click to share on Twitter\"><span>Twitter<\/span><\/a><\/li><li class=\"share-facebook\"><a rel=\"nofollow\" data-shared=\"sharing-facebook-615\" class=\"share-facebook sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=facebook\" target=\"_blank\" title=\"Click to share on Facebook\"><span>Facebook<\/span><\/a><\/li><li class=\"share-skype\"><a rel=\"nofollow\" data-shared=\"sharing-skype-615\" class=\"share-skype sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=skype\" target=\"_blank\" title=\"Share on Skype\"><span>Skype<\/span><\/a><\/li><li class=\"share-pocket\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-pocket sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=pocket\" target=\"_blank\" title=\"Click to share on Pocket\"><span>Pocket<\/span><\/a><\/li><li class=\"share-end\"><\/li><\/ul><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Sometime it happens to receive a JSON string than need to be visualized without knowing the structure. Suppose we have an HTML table: To populate this table with jQuery it&#8217;s possible to use this simple code: var rows = ${reportRows}; var html = $.each(rows, function(key, value){ $(&#8220;#reportTable&#8221;).append(&#8220;&#8221;); $.each(value, function (key, data) { $(&#8220;#reportTable&#8221;).append(&#8220;&#8221; + data [&hellip;]<\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing\"><h3 class=\"sd-title\">Share this:<\/h3><div class=\"sd-content\"><ul><li class=\"share-linkedin\"><a rel=\"nofollow\" data-shared=\"sharing-linkedin-615\" class=\"share-linkedin sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=linkedin\" target=\"_blank\" title=\"Click to share on LinkedIn\"><span>LinkedIn<\/span><\/a><\/li><li class=\"share-reddit\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-reddit sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=reddit\" target=\"_blank\" title=\"Click to share on Reddit\"><span>Reddit<\/span><\/a><\/li><li class=\"share-twitter\"><a rel=\"nofollow\" data-shared=\"sharing-twitter-615\" class=\"share-twitter sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=twitter\" target=\"_blank\" title=\"Click to share on Twitter\"><span>Twitter<\/span><\/a><\/li><li class=\"share-facebook\"><a rel=\"nofollow\" data-shared=\"sharing-facebook-615\" class=\"share-facebook sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=facebook\" target=\"_blank\" title=\"Click to share on Facebook\"><span>Facebook<\/span><\/a><\/li><li class=\"share-skype\"><a rel=\"nofollow\" data-shared=\"sharing-skype-615\" class=\"share-skype sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=skype\" target=\"_blank\" title=\"Share on Skype\"><span>Skype<\/span><\/a><\/li><li class=\"share-pocket\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-pocket sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/parse-and-unknown-json-with-jquery\/?share=pocket\" target=\"_blank\" title=\"Click to share on Pocket\"><span>Pocket<\/span><\/a><\/li><li class=\"share-end\"><\/li><\/ul><\/div><\/div><\/div>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[14],"tags":[4,21,58,45],"_links":{"self":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts\/615"}],"collection":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/comments?post=615"}],"version-history":[{"count":7,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts\/615\/revisions"}],"predecessor-version":[{"id":635,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts\/615\/revisions\/635"}],"wp:attachment":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/media?parent=615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/categories?post=615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/tags?post=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}