title: jQuery $.post processing JSON response
body: <p>I'm having trouble figuring out how to properly read my JSON response from a jQuery $.post() request.</p>
  
  <p>In the below jQuery code, I populate an associative array of strings from elements from the DOM based on the corresponding "color_entry_id" which I use as the key:</p>
  
  <pre><code>var image_links = {};
  $(this).find('input[name="color_id"]').each(function() {
      var color_entry_id = $(this).val();
      var image_link = $(this).parent().find('input[name="edit_image"].' + color_entry_id).val();
      image_links[color_entry_id] = image_link;
  });
  </code></pre>
  
  <p>Then I make the POST request, sending my array of "image_links":</p>
  
  <pre><code>$.post(
      "test.php",
      { id: product_id, "images[]": jQuery.makeArray(image_links) },
      function(data) {
          var response = jQuery.parseJSON(data);
          $.each(response.images, function(index, item) {
               alert(item);
          });
      }
  );
  </code></pre>
  
  <p>Also, as shown above, I try to loop through the response array and output each item, which I want to be a string, but I only get "[object Object]" as the alerted value. I don't know how to make it display the strings I'm trying to display!</p>
  
  <p>Here is the PHP code for test.php:</p>
  
  <pre><code>&lt;?php
      $product_id = $_POST['id'];
      $images = $_POST['images'];
  
      $response = array();
      $response['id'] = $product_id;
      $response['images'] = $images;
  
      echo json_encode($response);
  ?&gt;
  </code></pre>
  
  <p>And here's what the relevant part of the DOM looks like:</p>
  
  <pre><code>&lt;input type='hidden' value='{{ color_entry_id }}' name='color_id' /&gt;
  &lt;p&gt;&lt;img src='{{ color_img_link }}' /&gt;&lt;/p&gt;
  &lt;p&gt;Image Link: &lt;input class='{{ color_entry_id }}' name='edit_image' type='text' size='150' value='{{ color_img_link }}' /&gt;&lt;/p&gt;
  &lt;div class='colors {{ color_entry_id }}'&gt;
      &lt;div class='img_color'&gt;
          &lt;a href='javascript:void' style='background:...' class='selected'&gt;&lt;/a&gt;
          &lt;p&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm wondering whether perhaps I'm doing the JSON encoding incorrectly on the PHP side or if I'm just looping through the response incorrectly in the jQuery. Any help is much appreciated!!</p>