title: jquery getJSON and $.each looping through child array not linked to parent index
body: <p>I am pretty new to jQuery and JSON and brand new to this site.</p>
  
  <p>I am trying to display data from a JSON file using jQuery. </p>
  
  <p>JSON Example:</p>
  
  <pre><code>[
      {
          "show":"swim",
          "image": "Img1.jpg",
           "brands": 
                  [
                  {
                  "brand":"Img 1 Company",
                  "YAH": "Img 1 YAH"
                  },
                  {
                  "brand":"Img 1 Company 2",
                  "YAH": "Img 1 YAH 2"
                  }
                  ]
      },
      {
          "show":"swim",
          "image":"Img2.jpg",
          "brands": [
                  {
                  "brand":"Img 2 Company 1",
                  "YAH": "Img 2 YAH 1"
                  },
                  {
                  "brand":"Img 2 Company 2",
                  "YAH": "Img 2 YAH 2"
                  },
                  {
                  "brand":"Img 2 Company 3",
                  "YAH": "Img 2 YAH 3"
                  }
                  ]
      },
      {
          "show":"resort",
          "image":"Img3.jpg",
          "brands": [
                  {
                  "brand":"Img 3 Company 1",
                  "YAH": "Img 3 YAH 1"
                  },
                  {
                  "brand":"Img 3 Company 2",
                  "YAH": "Img 3 YAH 2"
                  }
                  ]
      }
  ]
  </code></pre>
  
  <p>I want the 'brands' array data to only show with the parent object.
  When I display to console.log it is correct, but when I .append it repeats all of the brands array data. 
  It correctly displays the 'images' values and it displays all of the data from the 'brands' array, but repeats the 'brands' array data. 
  The result displays like this:</p>
  
  <p>Img1.jpg</p>
  
  <ul>
  <li>Img 1 Company</li>
  <li>Img 1 Company 2</li>
  <li>Img 2 Company 1</li>
  <li>Img 2 Company 2</li>
  <li>Img 2 Company 3</li>
  <li>Img 3 Company 1</li>
  <li>Img 3 Company 2</li>
  </ul>
  
  <p>Img2.jpg</p>
  
  <ul>
  <li>Img 1 Company 2</li>
  <li>Img 2 Company 1</li>
  <li>Img 2 Company 2</li>
  <li>Img 2 Company 3</li>
  <li>Img 3 Company 1</li>
  <li>Img 3 Company 2</li>
  </ul>
  
  <p>Img3.jpg</p>
  
  <ul>
  <li>Img 3 Company 1</li>
  <li>Img 3 Company 2</li>
  </ul>
  
  <p>Where the result should be:</p>
  
  <p>Img1.jpg</p>
  
  <ul>
  <li>Img 1 Company</li>
  <li>Img 1 Company 2</li>
  </ul>
  
  <p>Img2.jpg</p>
  
  <ul>
  <li>Img 2 Company 1</li>
  <li>Img 2 Company 2</li>
  <li>Img 2 Company 3</li>
  </ul>
  
  <p>Img3.jpg</p>
  
  <ul>
  <li>Img 3 Company 1</li>
  <li>Img 3 Company 2</li>
  </ul>
  
  <p>I cannot figure out how to make the brands array only display the data for the parent object.
  this is my HTML and Script</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;meta charset="utf-8" /&gt;&lt;body&gt;
  &lt;div id="ImageGallery"&gt;&lt;/div&gt; 
  
  &lt;script&gt;
  $.getJSON('js/data.json', function(json) {
     $.each(json,function(i, value){
         $('#ImageGallery').append('&lt;p&gt;'+ value.image + '&lt;/p&gt;&lt;ul class="brands"&gt;&lt;/ul&gt;');
       $.each(value.brands, function(index, obj){
          $('ul.brands').append('&lt;li&gt;'+ obj.brand +'&lt;/li&gt;');
       })
          });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks!</p>