title: ES6 - Looping Through JSON
body: <p><strong>Problem Statement</strong></p>
  
  <p>I access JSON from an API -- let's call this API #1. Example data is listed below. Essentially contains forum information mainly posts</p>
  
  <pre><code>[{
      "userId": 1,
      "id": 10,
      "title": "Tt1",
      "body": "qBb2"
    },
    {
      "userId": 2,
      "id": 11,
      "title": "TT4",
      "body": "BBB5"
    }]
  </code></pre>
  
  <p>I access JSON from another API also -- let's call this API #2. This data contains personal information.</p>
  
  <pre><code>[
    {
      "id": 1,
      "name": "Lera",
      "username": "Lera2",
      "email": "Em@.com",
      "address": {
        "street": "GGa",
        "suite": "Ap3. 333",
        "city": "Gwee",
        "zipcode": "2222-3333",
        "geo": {
          "lat": "-11213",
          "lng": "312424"
        }]
  </code></pre>
  
  <p>I want to grab all unique names and place each name in a div with a class of "User" from API #2. </p>
  
  <p>Then, I want each post from API #1 to be displayed under each user from API #2, using match "id" fields.</p>
  
  <p><strong>What I have got so far</strong></p>
  
  <pre><code>fetch('API-#2')
  .then(function(response) {
      return response.json();
      })
  .then(function(myJson) {
      document.getElementById("testDiv").innerHTML = JSON.stringify(myJson);
  });
  </code></pre>
  
  <p>Output of the above is essentially raw data as displayed in API #2. It is not processed yet.</p>
  
  <p><strong>What I am not sure how to do</strong></p>
  
  <ol>
  <li>Need to use either map, reduce or possibly something else, to go through each name in API #2 and create a div</li>
  <li>Need to use a loop to go through each post in API #1 and then if it matches the 'id' field we paste it under the specific user's div</li>
  </ol>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>fetch('API-#2')
  .then(function(response) {
      return response.json();
      })
  .then(function(myJson) {
      myJson.filter(function (item, index, self) { return self.indexOf(item) === index; }).forEach(function (user) { 
        document.getElementById("testDiv2").innerHTML += "&lt;div&gt;" + user.name + "&lt;/div&gt;"; 
      });
  });
  </code></pre>
  
  <p>Returns and outputs the list of names:</p>
  
  <pre><code>Name 1
  Name 2
  Name 3
  </code></pre>
  
  <p>I just need to cross-match the posts to the names using the ID now</p>