title: Return values from an API in a JSON array
body: <p>I have this website that calls data from the API, renders the data in a table but every single cell returns undefined. </p>
  
  <p>The data in the API is inside an array like [] but the there are multiple data sets with {} inside them which I'm not sure how to define in JavaScript. How would I fix this? </p>
  
  <p><a href="http://dummy.restapiexample.com/api/v1/employees" rel="nofollow noreferrer">This is the link to the API</a> from where I wish to render the data.  Here is an example of this data:</p>
  
  <pre><code>[
      {
          "id": "40129",
          "employee_name": "EllakZa",
          "employee_salary": "56106",
          "employee_age": "311",
          "profile_image": ""
      },
      {
          "id": "40212",
          "employee_name": "Amit Negi111",
          "employee_salary": "123456",
          "employee_age": "44",
          "profile_image": ""
      }
  ]
  </code></pre>
  
  <p>My code follows:</p>
  
  <pre><code>$(document).ready(function(){
          $.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data){
              var employeeData = '[]';
              console.log(data);
              $.each(data, function({key, value}){
                  employeeData += '&lt;tr&gt;';
                  employeeData += '&lt;td&gt;'+data.id+'&lt;/td&gt;';
                  employeeData += '&lt;td&gt;'+data.employee_name+'&lt;/td&gt;';
                  employeeData += '&lt;td&gt;'+data.employee_salary+'&lt;/td&gt;';
                  employeeData += '&lt;td&gt;'+data.employee_age+'&lt;/td&gt;';
                  employeeData += '&lt;td&gt;'+data.profile_image+'&lt;/td&gt;';
                  employeeData += '&lt;tr&gt;';
              });
              $('#tracerouteTable').append(employeeData);
          });
      });
  </code></pre>