title: How to loop through JSON object with $.each JQuery?
body: <p>I want to make a live search with JSON data from <a href="http://swapi.co/api/people/?format=json" rel="nofollow noreferrer">star wars api</a>. The JSON contain of some <code>objects</code>, and the <code>objects</code> I wanted to fetch is <code>results</code>, which is an <code>array</code> that contains <code>objects</code> that have propertie <code>name</code>,<code>height</code>,<code>mass</code>, ect.</p>
  
  <p>The snippet of the JSON like this:</p>
  
  <pre><code>    {
      "count": 87,
      "next": "http://swapi.co/api/people/?format=json&amp;page=2",
      "previous": null,
      "results": [
      {
      "name": "Luke Skywalker",
      "height": "172",
      "mass": "77",
      "hair_color": "blond",
      "skin_color": "fair",
      "eye_color": "blue",
      "birth_year": "19BBY",
      "gender": "male",
      "homeworld": "http://swapi.co/api/planets/1/",
      "films": [
      "http://swapi.co/api/films/6/",
      "http://swapi.co/api/films/3/",
      "http://swapi.co/api/films/2/",
      "http://swapi.co/api/films/1/",
      "http://swapi.co/api/films/7/"
      ],
      "species": [
      "http://swapi.co/api/species/1/"
      ],
      "vehicles": [
      "http://swapi.co/api/vehicles/14/",
      "http://swapi.co/api/vehicles/30/"
      ],
      "starships": [
      "http://swapi.co/api/starships/12/",
      "http://swapi.co/api/starships/22/"
      ],
      "created": "2014-12-09T13:50:51.644000Z",
      "edited": "2014-12-20T21:17:56.891000Z",
      "url": "http://swapi.co/api/people/1/"
      }
  ]
  }
  </code></pre>
  
  <p>I tried with this code but the console says <code>Uncaught TypeError: Cannot read property 'name' of undefined</code> (on line 7)</p>
  
  <pre><code>$('#search').keyup(function() {
      var searchField = $('#search').val();
      var myExp = new RegExp(searchField, "i");
      $.getJSON('http://swapi.co/api/people/?format=json', function(data) {
          var output = '&lt;ul class="searchresults"&gt;';
          $.each(data, function(key, val) {
              if ((val.results.name.search(myExp) != -1) ||
              (val.results.height.search(myExp) != -1)) {
                  output += '&lt;li&gt;';
                  output += '&lt;h2&gt;'+ val.name +'&lt;/h2&gt;';
                  output += '&lt;p&gt;'+ val.height +'&lt;/p&gt;';
                  output += '&lt;/li&gt;';
              }
          });
          output += '&lt;/ul&gt;';
          $('#update').html(output);
      });
  });
  </code></pre>
  
  <p>I know there's something wrong with my loop, I tried looking for the the answer but I can't get the right answer. Can you please help me?</p>