{"id":75,"date":"2016-05-09T10:56:50","date_gmt":"2016-05-09T10:56:50","guid":{"rendered":"http:\/\/symbioticindia.in\/docu\/?p=75"},"modified":"2016-05-09T10:56:50","modified_gmt":"2016-05-09T10:56:50","slug":"convert-and-loop-through-json-with-php-and-javascript-arraysobjects","status":"publish","type":"post","link":"http:\/\/symbioticindia.in\/docu\/2016\/05\/09\/convert-and-loop-through-json-with-php-and-javascript-arraysobjects\/","title":{"rendered":"Convert and Loop through JSON with PHP and JavaScript Arrays\/Objects"},"content":{"rendered":"<header class=\"post-header\">\n<h1 class=\"post-title\">Convert and Loop through JSON with PHP and JavaScript Arrays\/Objects<\/h1>\n<p class=\"post-meta\"><time class=\"post-meta-time\" datetime=\"2014-09-30\">September 30, 2014<\/time> <span class=\"post-meta-author\">by <a class=\"post-meta-author-link\" href=\"https:\/\/jonsuh.com\/about\/\" rel=\"author\">Jonathan Suh<\/a><\/span><\/p>\n<\/header>\n<section class=\"post-content\">If you\u2019re working with JSON (JavaScript Object Notation) and either need to convert a JSON string to array or object and loop through it or vice-versa, take an array or object and convert it to a JSON string to return, both can be done in PHP or JavaScript.<\/p>\n<p>I broke up this post into three sections:<\/p>\n<ul>\n<li><a href=\"https:\/\/jonsuh.com\/blog\/convert-loop-through-json-php-javascript-arrays-objects\/#php\">Working with PHP<\/a><\/li>\n<li><a href=\"https:\/\/jonsuh.com\/blog\/convert-loop-through-json-php-javascript-arrays-objects\/#javascript\">Working with JavaScript<\/a><\/li>\n<li><a href=\"https:\/\/jonsuh.com\/blog\/convert-loop-through-json-php-javascript-arrays-objects\/#php-javascript\">Working with both PHP and JavaScript<\/a><\/li>\n<\/ul>\n<h2 id=\"convert-json-string-to-php-array-or-object\">Convert JSON String to PHP Array or Object<\/h2>\n<p>PHP &gt;= 5.2.0 features a function, <code class=\"highlighter-rouge\">json_decode<\/code>, that decodes a JSON string into a PHP variable. By default it returns an object. The second parameter accepts a boolean that when set as <code class=\"highlighter-rouge\">true<\/code>, tells it to return the objects as associative arrays. You can learn more about the<code class=\"highlighter-rouge\">json_decode<\/code> function from <a href=\"http:\/\/php.net\/manual\/en\/function.json-decode.php\" target=\"_blank\">PHP\u2019s documentation<\/a>.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"cp\">&lt;?php<\/span>\r\n  <span class=\"c1\">\/\/ JSON string\r\n<\/span>  <span class=\"nv\">$someJSON<\/span> <span class=\"o\">=<\/span> <span class=\"s1\">'[{\"name\":\"Jonathan Suh\",\"gender\":\"male\"},{\"name\":\"William Philbin\",\"gender\":\"male\"},{\"name\":\"Allison McKinnery\",\"gender\":\"female\"}]'<\/span><span class=\"p\">;<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Convert JSON string to Array\r\n<\/span>  <span class=\"nv\">$someArray<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">json_decode<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someJSON<\/span><span class=\"p\">,<\/span> <span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"nb\">print_r<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someArray<\/span><span class=\"p\">);<\/span>        <span class=\"c1\">\/\/ Dump all data of the Array\r\n<\/span>  <span class=\"k\">echo<\/span> <span class=\"nv\">$someArray<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"name\"<\/span><span class=\"p\">];<\/span> <span class=\"c1\">\/\/ Access Array data\r\n<\/span>\r\n  <span class=\"c1\">\/\/ Convert JSON string to Object\r\n<\/span>  <span class=\"nv\">$someObject<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">json_decode<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someJSON<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"nb\">print_r<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someObject<\/span><span class=\"p\">);<\/span>      <span class=\"c1\">\/\/ Dump all data of the Object\r\n<\/span>  <span class=\"k\">echo<\/span> <span class=\"nv\">$someObject<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">]<\/span><span class=\"o\">-&gt;<\/span><span class=\"na\">name<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Access Object data\r\n<\/span><span class=\"cp\">?&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<h2 id=\"loop-through-php-array-or-object\">Loop through PHP Array or Object<\/h2>\n<p>Loop through a PHP array or object with a <code class=\"highlighter-rouge\">foreach<\/code> loop.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"cp\">&lt;?php<\/span>\r\n  <span class=\"c1\">\/\/ Loop through Array\r\n<\/span>  <span class=\"nv\">$someArray<\/span> <span class=\"o\">=<\/span> <span class=\"o\">...<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Replace ... with your PHP Array\r\n<\/span>  <span class=\"k\">foreach<\/span> <span class=\"p\">(<\/span><span class=\"nv\">$someArray<\/span> <span class=\"k\">as<\/span> <span class=\"nv\">$key<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nv\">$value<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">echo<\/span> <span class=\"nv\">$value<\/span><span class=\"p\">[<\/span><span class=\"s2\">\"name\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">.<\/span> <span class=\"s2\">\", \"<\/span> <span class=\"o\">.<\/span> <span class=\"nv\">$value<\/span><span class=\"p\">[<\/span><span class=\"s2\">\"gender\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">.<\/span> <span class=\"s2\">\"&lt;br&gt;\"<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Loop through Object\r\n<\/span>  <span class=\"nv\">$someObject<\/span> <span class=\"o\">=<\/span> <span class=\"o\">...<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Replace ... with your PHP Object\r\n<\/span>  <span class=\"k\">foreach<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someObject<\/span> <span class=\"k\">as<\/span> <span class=\"nv\">$key<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nv\">$value<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">echo<\/span> <span class=\"nv\">$value<\/span><span class=\"o\">-&gt;<\/span><span class=\"na\">name<\/span> <span class=\"o\">.<\/span> <span class=\"s2\">\", \"<\/span> <span class=\"o\">.<\/span> <span class=\"nv\">$value<\/span><span class=\"o\">-&gt;<\/span><span class=\"na\">gender<\/span> <span class=\"o\">.<\/span> <span class=\"s2\">\"&lt;br&gt;\"<\/span><span class=\"p\">;<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"cp\">?&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>Note the differences in accessing the values of an array vs an object.<\/p>\n<h2 id=\"convert-php-array-or-object-to-json-string\">Convert PHP Array or Object to JSON String<\/h2>\n<p>PHP also features a <code class=\"highlighter-rouge\">json_encode<\/code> function to convert an array or object into a string. Read more about the <code class=\"highlighter-rouge\">json_encode<\/code> function from <a href=\"http:\/\/php.net\/manual\/en\/function.json-encode.php\" target=\"_blank\">PHP\u2019s documentation<\/a>.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"cp\">&lt;?php<\/span>\r\n  <span class=\"c1\">\/\/ Array\r\n<\/span>  <span class=\"nv\">$someArray<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"p\">[<\/span>\r\n      <span class=\"s2\">\"name\"<\/span>   <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"Jonathan Suh\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"male\"<\/span>\r\n    <span class=\"p\">],<\/span>\r\n    <span class=\"p\">[<\/span>\r\n      <span class=\"s2\">\"name\"<\/span>   <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"William Philbin\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"male\"<\/span>\r\n    <span class=\"p\">],<\/span>\r\n    <span class=\"p\">[<\/span>\r\n      <span class=\"s2\">\"name\"<\/span>   <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"Allison McKinnery\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"female\"<\/span>\r\n    <span class=\"p\">]<\/span>\r\n  <span class=\"p\">];<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Convert Array to JSON String\r\n<\/span>  <span class=\"nv\">$someJSON<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">json_encode<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someArray<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"k\">echo<\/span> <span class=\"nv\">$someJSON<\/span><span class=\"p\">;<\/span>\r\n<span class=\"cp\">?&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>Note that I\u2019m using the short array syntax that\u2019s featured in PHP 5.4+.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"cp\">&lt;?php<\/span>\r\n  <span class=\"nv\">$array<\/span> <span class=\"o\">=<\/span> <span class=\"k\">array<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"s2\">\"foo\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"bar\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"s2\">\"bar\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"foo\"<\/span>\r\n  <span class=\"p\">);<\/span>\r\n\r\n  <span class=\"c1\">\/\/ as of PHP 5.4\r\n<\/span>  <span class=\"nv\">$array<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"s2\">\"foo\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"bar\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"s2\">\"bar\"<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"s2\">\"foo\"<\/span>\r\n  <span class=\"p\">];<\/span>\r\n<span class=\"cp\">?&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<hr \/>\n<h2 id=\"convert-json-string-to-javascript-object\">Convert JSON String to JavaScript Object<\/h2>\n<p>JavaScript has a built-in <code class=\"highlighter-rouge\">JSON.parse()<\/code> method that parses a JSON string and returns an object.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"o\">&lt;<\/span><span class=\"nx\">script<\/span><span class=\"o\">&gt;<\/span>\r\n  <span class=\"c1\">\/\/ Convert JSON String to JavaScript Object<\/span>\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONString<\/span> <span class=\"o\">=<\/span> <span class=\"s1\">'[{\"name\":\"Jonathan Suh\",\"gender\":\"male\"},{\"name\":\"William Philbin\",\"gender\":\"male\"},{\"name\":\"Allison McKinnery\",\"gender\":\"female\"}]'<\/span><span class=\"p\">;<\/span>\r\n\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nx\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONString<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">);<\/span>      <span class=\"c1\">\/\/ Dump all data of the Object in the console<\/span>\r\n  <span class=\"nx\">alert<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"name\"<\/span><span class=\"p\">]);<\/span> <span class=\"c1\">\/\/ Access Object data<\/span>\r\n<span class=\"o\">&lt;<\/span><span class=\"sr\">\/script<\/span><span class=\"err\">&gt;\r\n<\/span><\/code><\/pre>\n<\/div>\n<p><code class=\"highlighter-rouge\">JSON.parse()<\/code> is very well-supported, but there are browsers that do not support it (i.e. &lt;= IE 7. More information at <a href=\"http:\/\/caniuse.com\/#feat=json\" target=\"_blank\">caniuse.com<\/a>).<\/p>\n<p>jQuery 1.x has a <code class=\"highlighter-rouge\">$.parseJSON()<\/code> method that should fill in the gaps for those browsers if you\u2019re needing to support them. You can also use the<a href=\"https:\/\/github.com\/douglascrockford\/JSON-js\" target=\"_blank\">JSON-js<\/a> library as a polyfill.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"o\">&lt;<\/span><span class=\"nx\">script<\/span><span class=\"o\">&gt;<\/span>\r\n  <span class=\"c1\">\/\/ Convert JSON String to JavaScript Object with jQuery<\/span>\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONString<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">\"...\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Replace ... with your JSON String<\/span>\r\n\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nx\">parseJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONString<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">);<\/span>      <span class=\"c1\">\/\/ Dump all data of the Object in the console<\/span>\r\n  <span class=\"nx\">alert<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"name\"<\/span><span class=\"p\">]);<\/span> <span class=\"c1\">\/\/ Access Object data<\/span>\r\n<span class=\"o\">&lt;<\/span><span class=\"sr\">\/script<\/span><span class=\"err\">&gt;\r\n<\/span><\/code><\/pre>\n<\/div>\n<h2 id=\"loop-through-javascript-object\">Loop through JavaScript Object<\/h2>\n<p>You can then loop through a JavaScript object using a <code class=\"highlighter-rouge\">for in<\/code> loop.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"o\">&lt;<\/span><span class=\"nx\">script<\/span><span class=\"o\">&gt;<\/span>\r\n  <span class=\"c1\">\/\/ Loop through Object<\/span>\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONObject<\/span> <span class=\"o\">=<\/span> <span class=\"p\">...;<\/span> <span class=\"c1\">\/\/ Replace ... with your JavaScript Object<\/span>\r\n\r\n  <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">var<\/span> <span class=\"nx\">key<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">JSONObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">.<\/span><span class=\"nx\">hasOwnProperty<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nx\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"name\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">+<\/span> <span class=\"s2\">\", \"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSONObject<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"gender\"<\/span><span class=\"p\">]);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"o\">&lt;<\/span><span class=\"sr\">\/script<\/span><span class=\"err\">&gt;\r\n<\/span><\/code><\/pre>\n<\/div>\n<h2 id=\"convert-javascript-object-to-json-string\">Convert JavaScript Object to JSON String<\/h2>\n<p>JavaScript has a <code class=\"highlighter-rouge\">JSON.stringify<\/code> method to convert a value into a JSON string.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"o\">&lt;<\/span><span class=\"nx\">script<\/span><span class=\"o\">&gt;<\/span>\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONObject<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n    <span class=\"p\">{<\/span>\r\n      <span class=\"s2\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"Jonathan Suh\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"male\"<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"p\">{<\/span>\r\n      <span class=\"s2\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"William Philbin\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"male\"<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"p\">{<\/span>\r\n      <span class=\"s2\">\"name\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"Allison McKinnery\"<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"female\"<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">];<\/span>\r\n\r\n  <span class=\"kd\">var<\/span> <span class=\"nx\">JSONString<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nx\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"nx\">alert<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONString<\/span><span class=\"p\">);<\/span>\r\n<span class=\"o\">&lt;<\/span><span class=\"sr\">\/script<\/span><span class=\"err\">&gt;\r\n<\/span><\/code><\/pre>\n<\/div>\n<p>Like <code class=\"highlighter-rouge\">JSON.parse<\/code>, <code class=\"highlighter-rouge\">JSON.stringify<\/code> is not supported in dinosaur browsers like &lt;= IE 7. You can use the <a href=\"https:\/\/github.com\/douglascrockford\/JSON-js\" target=\"_blank\">JSON-js library<\/a> to polyfill<code class=\"highlighter-rouge\">JSON.stringify<\/code> as well.<\/p>\n<hr \/>\n<p>You can combine the methods above to create powerful, dynamic implementations on your website or application.<\/p>\n<p>Let\u2019s say you want to get information from a database, safely return the data as JSON, and loop through it dynamically, you can do so with a bit of PHP and JavaScript with Ajax.<\/p>\n<h2 id=\"dynamically-get-json-via-ajax-and-loop-through-json\">Dynamically Get JSON via Ajax and Loop Through JSON<\/h2>\n<p>Let\u2019s assume your database structure looks like the following:<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code>Table: people\r\n\u250c\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\r\n| id | name               | gender  |\r\n\u251c\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\r\n| 0  | Jonathan Suh       | male    |\r\n| 1  | William Philbin    | male    |\r\n| 2  | Allison McKinnery  | female  |\r\n| 3  | Becky Borgster     | female  |\r\n| 4  | Victoria Einsteen  | female  |\r\n\u2514\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\r\n<\/code><\/pre>\n<\/div>\n<p>And you want to dynamically get a list of people from the database based on gender, like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/jonsuh.com\/assets\/images\/blog\/2014\/convert-loop-through-json-php-javascript-arrays-objects\/dynamic-select.gif\" \/><\/p>\n<p>Let\u2019s start with the front-end file <code class=\"highlighter-rouge\">index.html<\/code> that\u2019ll have a select dropdown with genders to select from, a table to display the results, and the script to handle the Ajax. The JavaScript is written in jQuery.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"nt\">&lt;select<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"gender\"<\/span> <span class=\"na\">name=<\/span><span class=\"s\">\"gender\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;option<\/span> <span class=\"na\">value=<\/span><span class=\"s\">\"male\"<\/span><span class=\"nt\">&gt;<\/span>Male<span class=\"nt\">&lt;\/option&gt;<\/span>\r\n  <span class=\"nt\">&lt;option<\/span> <span class=\"na\">value=<\/span><span class=\"s\">\"female\"<\/span><span class=\"nt\">&gt;<\/span>Female<span class=\"nt\">&lt;\/option&gt;<\/span>\r\n<span class=\"nt\">&lt;\/select&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;table<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"people\"<\/span> <span class=\"na\">border=<\/span><span class=\"s\">\"1\"<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;thead&gt;<\/span>\r\n    <span class=\"nt\">&lt;th&gt;<\/span>Name<span class=\"nt\">&lt;\/th&gt;<\/span>\r\n    <span class=\"nt\">&lt;th&gt;<\/span>Gender<span class=\"nt\">&lt;\/th&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/thead&gt;<\/span>\r\n  <span class=\"nt\">&lt;tbody&gt;<\/span>\r\n\r\n  <span class=\"nt\">&lt;\/tbody&gt;<\/span>\r\n<span class=\"nt\">&lt;\/table&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"http:\/\/code.jquery.com\/jquery-1.11.1.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\r\n<span class=\"nt\">&lt;script&gt;<\/span>\r\n<span class=\"nx\">$<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"#gender\"<\/span><span class=\"p\">).<\/span><span class=\"nx\">on<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"change\"<\/span><span class=\"p\">,<\/span> <span class=\"kd\">function<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">$<\/span><span class=\"p\">.<\/span><span class=\"nx\">ajax<\/span><span class=\"p\">({<\/span>\r\n    <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"POST\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">data<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"s2\">\"gender\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">$<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"#gender\"<\/span><span class=\"p\">).<\/span><span class=\"nx\">val<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"p\">},<\/span>\r\n    <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"response.php\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">dataType<\/span><span class=\"p\">:<\/span> <span class=\"s2\">\"json\"<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"na\">success<\/span><span class=\"p\">:<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"kd\">var<\/span> <span class=\"nx\">peopleHTML<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">\"\"<\/span><span class=\"p\">;<\/span>\r\n\r\n      <span class=\"c1\">\/\/ Loop through Object and create peopleHTML<\/span>\r\n      <span class=\"k\">for<\/span> <span class=\"p\">(<\/span><span class=\"kd\">var<\/span> <span class=\"nx\">key<\/span> <span class=\"k\">in<\/span> <span class=\"nx\">JSONObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">JSONObject<\/span><span class=\"p\">.<\/span><span class=\"nx\">hasOwnProperty<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"nx\">peopleHTML<\/span> <span class=\"o\">+=<\/span> <span class=\"s2\">\"&lt;tr&gt;\"<\/span><span class=\"p\">;<\/span>\r\n            <span class=\"nx\">peopleHTML<\/span> <span class=\"o\">+=<\/span> <span class=\"s2\">\"&lt;td&gt;\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSONObject<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"name\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">+<\/span> <span class=\"s2\">\"&lt;\/td&gt;\"<\/span><span class=\"p\">;<\/span>\r\n            <span class=\"nx\">peopleHTML<\/span> <span class=\"o\">+=<\/span> <span class=\"s2\">\"&lt;td&gt;\"<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">JSONObject<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">][<\/span><span class=\"s2\">\"gender\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">+<\/span> <span class=\"s2\">\"&lt;\/td&gt;\"<\/span><span class=\"p\">;<\/span>\r\n          <span class=\"nx\">peopleHTML<\/span> <span class=\"o\">+=<\/span> <span class=\"s2\">\"&lt;\/tr&gt;\"<\/span><span class=\"p\">;<\/span>\r\n        <span class=\"p\">}<\/span>\r\n      <span class=\"p\">}<\/span>\r\n\r\n      <span class=\"c1\">\/\/ Replace table\u2019s tbody html with peopleHTML<\/span>\r\n      <span class=\"nx\">$<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"#people tbody\"<\/span><span class=\"p\">).<\/span><span class=\"nx\">html<\/span><span class=\"p\">(<\/span><span class=\"nx\">peopleHTML<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">});<\/span>\r\n<span class=\"p\">});<\/span>\r\n<span class=\"nt\">&lt;\/script&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>Now let\u2019s create a <code class=\"highlighter-rouge\">response.php<\/code> file to handle the back-end logic of getting the information from the database and returning the results as a JSON string.<\/p>\n<div class=\"highlighter-rouge\">\n<pre class=\"highlight\"><code><span class=\"cp\">&lt;?php<\/span>\r\n  <span class=\"c1\">\/\/ File: response.php\r\n<\/span>\r\n  <span class=\"c1\">\/\/ Get POST gender value\r\n<\/span>  <span class=\"nv\">$gender<\/span> <span class=\"o\">=<\/span> <span class=\"nv\">$_POST<\/span><span class=\"p\">[<\/span><span class=\"s2\">\"gender\"<\/span><span class=\"p\">];<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Connect to the database\r\n<\/span>  <span class=\"c1\">\/\/ replace the parameters with your proper credentials\r\n<\/span>  <span class=\"nv\">$connection<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">mysqli_connect<\/span><span class=\"p\">(<\/span><span class=\"s2\">\"localhost\"<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"username\"<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"password\"<\/span><span class=\"p\">,<\/span> <span class=\"s2\">\"database_name\"<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Query to run\r\n<\/span>  <span class=\"nv\">$query<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">mysqli_query<\/span><span class=\"p\">(<\/span><span class=\"nv\">$connection<\/span><span class=\"p\">,<\/span>\r\n           <span class=\"s2\">\"SELECT * FROM people WHERE gender = '\"<\/span> <span class=\"o\">.<\/span> <span class=\"nv\">$gender<\/span> <span class=\"o\">.<\/span> <span class=\"s2\">\"'\"<\/span><span class=\"p\">);<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Create empty array to hold query results\r\n<\/span>  <span class=\"nv\">$someArray<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Loop through query and push results into $someArray;\r\n<\/span>  <span class=\"k\">while<\/span> <span class=\"p\">(<\/span><span class=\"nv\">$row<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">mysqli_fetch_assoc<\/span><span class=\"p\">(<\/span><span class=\"nv\">$query<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nb\">array_push<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someArray<\/span><span class=\"p\">,<\/span> <span class=\"p\">[<\/span>\r\n      <span class=\"s1\">'name'<\/span>   <span class=\"o\">=&gt;<\/span> <span class=\"nv\">$row<\/span><span class=\"p\">[<\/span><span class=\"s1\">'name'<\/span><span class=\"p\">],<\/span>\r\n      <span class=\"s1\">'gender'<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nv\">$row<\/span><span class=\"p\">[<\/span><span class=\"s1\">'gender'<\/span><span class=\"p\">]<\/span>\r\n    <span class=\"p\">]);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n\r\n  <span class=\"c1\">\/\/ Convert the Array to a JSON String and echo it\r\n<\/span>  <span class=\"nv\">$someJSON<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">json_encode<\/span><span class=\"p\">(<\/span><span class=\"nv\">$someArray<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"k\">echo<\/span> <span class=\"nv\">$someJSON<\/span><span class=\"p\">;<\/span>\r\n<span class=\"cp\">?&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<p>To get a more in-depth and better example of PHP-JSON-JavaScript\/jQuery-Ajax interaction, read my <a href=\"https:\/\/jonsuh.com\/blog\/jquery-ajax-call-to-php-script-with-json-return\/\">jQuery Ajax Call to PHP Script with JSON Return<\/a> post.<\/p>\n<\/section>\n<section class=\"post-share\">\n<ul class=\"post-share-menu\">\n<li class=\"post-share-menu-title\">SHARE<\/li>\n<li class=\"post-share-menu-item\"><\/li>\n<li class=\"post-share-menu-item\"><\/li>\n<li class=\"post-share-menu-item\"><\/li>\n<\/ul>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Convert and Loop through JSON with PHP and JavaScript Arrays\/Objects September 30, 2014 by Jonathan Suh If you\u2019re working with JSON (JavaScript Object Notation) and either need to convert a JSON string to array or object and loop through it or vice-versa, take an array or object and convert it to a JSON string to ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"http:\/\/symbioticindia.in\/docu\/2016\/05\/09\/convert-and-loop-through-json-with-php-and-javascript-arraysobjects\/\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,20,19,6],"tags":[],"class_list":["post-75","post","type-post","status-publish","format-standard","hentry","category-ajax","category-javascript","category-json","category-php"],"_links":{"self":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/75","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/comments?post=75"}],"version-history":[{"count":1,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/75\/revisions"}],"predecessor-version":[{"id":76,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/posts\/75\/revisions\/76"}],"wp:attachment":[{"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/media?parent=75"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/categories?post=75"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/symbioticindia.in\/docu\/wp-json\/wp\/v2\/tags?post=75"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}