title: Iteration through json object with API
body: <p>In the table needs to show the data for the some users that are linked from the link in the request.Im getting the XMLRequest first and setting RequestHeader.</p>
  <p>In function show i am creating th tags for the users for their attributes.I have a issue with users data that needs to be shown below.I can't figure out whats the problem with printing undefined in td tags.</p>
  <p>The prototype of the data is Object.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script&gt;
  
      var request = new XMLHttpRequest();
  
      request.open("GET","https://dummyapi.io/data/v1/user")
  
      request.setRequestHeader("app-id","6176d770ceedfe1a52297285");
  
      request.onreadystatechange = async function () {
  
          var json = JSON.parse(request.responseText);
          var f = json.data;
  
          var obj = Object.assign({},json.data);
          console.log(obj);
          show(obj);
  
      }
      request.send();
  
      function show(data) {
          let tab =
              `&lt;tr&gt;
            &lt;th&gt;Id&lt;/th&gt;
            &lt;th&gt;Title&lt;/th&gt;
            &lt;th&gt;First Name&lt;/th&gt;
            &lt;th&gt;Last Name&lt;/th&gt;
            &lt;th&gt;Picture&lt;/th&gt;
           &lt;/tr&gt;`;
  
  
          for (var r in data) {
  
              tab += `&lt;tr&gt;
      &lt;td&gt;${r.id} &lt;/td&gt;
      &lt;td&gt;${r.title}&lt;/td&gt;
      &lt;td&gt;${r.firstName}&lt;/td&gt;
      &lt;td&gt;${r.lastName}&lt;/td&gt;
      &lt;td&gt;${r.picture}&lt;/td&gt;
  
  
  &lt;/tr&gt;`;
          }
          document.getElementById("employees").innerHTML = tab;
      }
      // show(data);
  
  &lt;/script&gt;
  
  
  &lt;h1&gt;Registered Employees&lt;/h1&gt;
  &lt;table id="employees"&gt;&lt;/table&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>