Navigating JSON Data with ES6 Iteration

Question

Navigating JSON Data with ES6 Iteration

Issue Description

There are two APIs I am working with. The first one, let's call it API #1, provides JSON data related to forum posts as shown below:

[{
    "userId": 1,
    "id": 10,
    "title": "Tt1",
    "body": "qBb2"
  },
  {
    "userId": 2,
    "id": 11,
    "title": "TT4",
    "body": "BBB5"
  }]

The second API, referred to as API #2, contains personal information such as names and user IDs.

[
  {
    "id": 1,
    "name": "Lera",
    "username": "Lera2",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ebae86abc5888486">[email protected]</a>",
    "address": {
      "street": "GGa",
      "suite": "Ap3. 333",
      "city": "Gwee",
      "zipcode": "2222-3333",
      "geo": {
        "lat": "-11213",
        "lng": "312424"
      }]

I aim to extract unique names from API #2 and place each name within a div labeled "User". Subsequently, I plan to display the posts from API #1 under the corresponding User div based on a matching field ("id").

Progress Made So Far

fetch('API-#2')
.then(function(response) {
    return response.json();
    })
.then(function(myJson) {
    document.getElementById("testDiv").innerHTML = JSON.stringify(myJson);
});

The current output displays raw data from API #2 without any processing.

Challenges Faced

I need to utilize methods like map, reduce, or similar to iterate through names in API #2 and create respective User divs.
It is necessary to loop through posts in API #1 and assign each post under the appropriate User div by matching their 'id' fields.

UPDATE

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 += "<div>" + user.name + "</div>"; 
    });
});

The above code snippet successfully lists out the unique names fetched:

Name 1
Name 2
Name 3

My next step involves associating the posts with the corresponding names using their IDs for cross-referencing.

javascript json ajax ecmascript-6 es6-promise

Answer 1

Answer №1

If you're looking for a starting point, consider the following example:

fetch('API-#2')
.then((response) => {
    return response.json();
    })
.then((myJson) => {
    let uniqueValues = myJson.filter((item, index, self) => { 
        return self.indexOf(item) === index; 
    });
    
    uniqueValues.forEach((user) => { 
      document.getElementById("testDiv").innerHTML += "<div>" + user.name + "</div>"; 
    });
});

Interact with myJson like any other JavaScript object. You have the option to filter out duplicate values and loop through the array of data.

Consider utilizing jQuery or another library for a more efficient way to generate HTML without string concatenation – this code serves as an example.

Answer 2

If you're looking for a starting point, consider the following example:

fetch('API-#2')
.then((response) => {
    return response.json();
    })
.then((myJson) => {
    let uniqueValues = myJson.filter((item, index, self) => { 
        return self.indexOf(item) === index; 
    });
    
    uniqueValues.forEach((user) => { 
      document.getElementById("testDiv").innerHTML += "<div>" + user.name + "</div>"; 
    });
});

Interact with myJson like any other JavaScript object. You have the option to filter out duplicate values and loop through the array of data.

Consider utilizing jQuery or another library for a more efficient way to generate HTML without string concatenation – this code serves as an example.

Answer 3

Answer №2

I'm not sure if this meets your needs.

This example assumes that you have already fetched the data from API1 and API2.

In order to streamline the process, I transform the user Array into a user Object. The keys of the Object represent the userid, while the values are the original data.

This arrangement facilitates quicker user lookups based on the topic:

    let user = userList[topic.userId];

Next, there is a loop that converts the Topic Array from an object structure to an array of strings. These strings are then concatenated with '\n' as a separator.

The resulting string is inserted into the designated div intended for displaying the generated HTML.

// Assume that this data came from the first API call
let api1Resp = [
  {
    "userId": 1,
    "id": 10,
    "title": "Something Cool",
    "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "userId": 2,
    "id": 11,
    "title": "Something else",
    "body": "Excepteur veniam deserunt eu fugiat occaecat voluptate Lorem fugiat officia proident laboris pariatur minim laboris qui. Reprehenderit veniam eu duis anim incididunt adipisicing dolor officia. Ad et magna sint sit sint nisi officia labore do deserunt ut velit quis tempor do nulla adipisicing. Sit aliqua incididunt fugiat aute ex mollit ea aliquip et magna ut id deserunt ut. Dolore ullamco qui sunt Lorem cillum aliquip exercitation. Irure cillum laboris sit eu tempor dolore proident consectetur irure laboris eiusmod reprehenderit."
  },
  {
    "userId": 2,
    "id": 12,
    "title": "Hot Stuff",
    "body": "Ullamco minim aute laboris enim veniam ex et. Do Lorem laborum veniam labore incididunt occaecat eiusmod et occaecat eiusmod non sunt non non. Ad eiusmod ipsum ex velit cupidatat consequat anim consectetur dolore ea veniam.\n"+
            "\n"+
            "Consequat commodo culpa ipsum mollit voluptate do in adipisicing ea quis id est duis labore aliqua nisi tempor. Reprehenderit reprehenderit veniam nostrud excepteur aliquip ut sit tempor consectetur excepteur. Minim fugiat aliqua laboris aliqua nostrud id ex proident. Dolore amet occaecat dolor deserunt tempor irure labore veniam ad culpa mollit ex irure laborum anim cillum laborum. Est sunt nisi anim quis elit anim in. Velit qui reprehenderit laboris et est adipisicing quis esse ullamco nisi anim. Voluptate velit commodo ex laboris consequat dolor culpa consequat cupidatat occaecat ullamco fugiat aliqua minim voluptate commodo proident. Aliquip laboris ad sint consequat eiusmod minim velit velit id.\n"+
            "\n"+
            "Culpa Lorem laboris elit non fugiat aute et labore exercitation et in sunt ullamco tempor irure non quis. Laborum nulla nostrud labore incididunt ipsum Lorem ut aliquip velit deserunt sunt exercitation aliqua irure proident laboris. Quis et velit anim in id enim culpa id. Ex consequat labore adipisicing sunt non in proident cupidatat esse officia nostrud. Pariatur dolor officia culpa deserunt aliqua id exercitation duis magna sunt in elit officia. Aliquip nulla veniam consectetur ut sit labore officia sit reprehenderit.\n"+
            "\n"+
            "Et est esse adipisicing veniam sint laborum Lorem elit. Culpa ad anim irure ut dolore fugiat dolor ullamco ea culpa aliqua eiusmod nulla. Adipisicing dolore incididunt non velit laborum mollit sit nulla. Nisi quis pariatur excepteur ullamco id eu laborum anim esse. Ut elit nisi exercitation anim elit consectetur velit officia laboris quis et. Occaecat consequat duis duis tempor ullamco dolor anim tempor non occaecat occaecat irure dolore."
  },
  {
    "userId": 2,
    "id": 13,
    "title": "This is a longer title",
    "body": "Excepteur veniam deserunt eu fugiat occaecat voluptate Lorem fugiat officia proident laboris pariatur minim laboris qui. Reprehenderit veniam eu duis anim incididunt adipisicing dolor officia. Ad et magna sint sit sint nisi officia labore do deserunt ut velit quis tempor do nulla adipisicing. Sit aliqua incididunt fugiat aute ex mollit ea aliquip et magna ut id deserunt ut. Dolore ullamco qui sunt Lorem cillum aliquip exercitation. Irure cillum laboris sit eu tempor dolore proident consectetur irure laboris eiusmod reprehenderit."
  }
];


// Assume that this data came from the second API call
let api2Resp = [
  {
    "id": 1,
    "name": "Lera",
    "username": "Lera2",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8edc5e886cbc7c5">[email protected]</a>",
    "address": {
      "street": "GGa",
      "suite": "Ap3. 333",
      "city": "Gwee",
      "zipcode": "2222-3333",
      "geo": {
        "lat": "-11213",
        "lng": "312424"
      }
    }
  },
  {
    "id": 2,
    "name": "John",
    "username": "Big John",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba389a5a0bdbda5acafa6a6bde7aaa6a4">[email protected]</a>",
    "address": {
      "street": "123 Street",
      "suite": "",
      "city": "Smallville",
      "zipcode": "12345-6789",
      "geo": {
        "lat": "-11213",
        "lng": "312424"
      }
    }
  }
];

// Transform the array into an object where the user id is the key and the user info object is the value.
// This simplifies data retrieval.
let userList = api2Resp.reduce(
  (newUserList, user) => {
    newUserList[user.id] = user;
    return newUserList;
  }, {}
);


// Generate all of the output
let html = api1Resp.map(
  topic => {
    // Try to retrieve the user info from the topic
    let user = userList[topic.userId];
    // If user is undefined it means it's not in the list

    return `
    <div class="topic" id="topic:${topic.id}">
      <h2>${topic.title}</h2>
      <div class="author">By: <a href="mailto:${user.email}">${user.username}</a></div>
      <div class="body">${topic.body.replace(/\n/g, '<br/>\n')}</div>
    </div>`;
  }
).join('\n');

let el = document.getElementById('output');
el.innerHTML = html;

<div id="output"></div>

Answer 4

I'm not sure if this meets your needs.

This example assumes that you have already fetched the data from API1 and API2.

In order to streamline the process, I transform the user Array into a user Object. The keys of the Object represent the userid, while the values are the original data.

This arrangement facilitates quicker user lookups based on the topic:

    let user = userList[topic.userId];

Next, there is a loop that converts the Topic Array from an object structure to an array of strings. These strings are then concatenated with '\n' as a separator.

The resulting string is inserted into the designated div intended for displaying the generated HTML.

// Assume that this data came from the first API call
let api1Resp = [
  {
    "userId": 1,
    "id": 10,
    "title": "Something Cool",
    "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  },
  {
    "userId": 2,
    "id": 11,
    "title": "Something else",
    "body": "Excepteur veniam deserunt eu fugiat occaecat voluptate Lorem fugiat officia proident laboris pariatur minim laboris qui. Reprehenderit veniam eu duis anim incididunt adipisicing dolor officia. Ad et magna sint sit sint nisi officia labore do deserunt ut velit quis tempor do nulla adipisicing. Sit aliqua incididunt fugiat aute ex mollit ea aliquip et magna ut id deserunt ut. Dolore ullamco qui sunt Lorem cillum aliquip exercitation. Irure cillum laboris sit eu tempor dolore proident consectetur irure laboris eiusmod reprehenderit."
  },
  {
    "userId": 2,
    "id": 12,
    "title": "Hot Stuff",
    "body": "Ullamco minim aute laboris enim veniam ex et. Do Lorem laborum veniam labore incididunt occaecat eiusmod et occaecat eiusmod non sunt non non. Ad eiusmod ipsum ex velit cupidatat consequat anim consectetur dolore ea veniam.\n"+
            "\n"+
            "Consequat commodo culpa ipsum mollit voluptate do in adipisicing ea quis id est duis labore aliqua nisi tempor. Reprehenderit reprehenderit veniam nostrud excepteur aliquip ut sit tempor consectetur excepteur. Minim fugiat aliqua laboris aliqua nostrud id ex proident. Dolore amet occaecat dolor deserunt tempor irure labore veniam ad culpa mollit ex irure laborum anim cillum laborum. Est sunt nisi anim quis elit anim in. Velit qui reprehenderit laboris et est adipisicing quis esse ullamco nisi anim. Voluptate velit commodo ex laboris consequat dolor culpa consequat cupidatat occaecat ullamco fugiat aliqua minim voluptate commodo proident. Aliquip laboris ad sint consequat eiusmod minim velit velit id.\n"+
            "\n"+
            "Culpa Lorem laboris elit non fugiat aute et labore exercitation et in sunt ullamco tempor irure non quis. Laborum nulla nostrud labore incididunt ipsum Lorem ut aliquip velit deserunt sunt exercitation aliqua irure proident laboris. Quis et velit anim in id enim culpa id. Ex consequat labore adipisicing sunt non in proident cupidatat esse officia nostrud. Pariatur dolor officia culpa deserunt aliqua id exercitation duis magna sunt in elit officia. Aliquip nulla veniam consectetur ut sit labore officia sit reprehenderit.\n"+
            "\n"+
            "Et est esse adipisicing veniam sint laborum Lorem elit. Culpa ad anim irure ut dolore fugiat dolor ullamco ea culpa aliqua eiusmod nulla. Adipisicing dolore incididunt non velit laborum mollit sit nulla. Nisi quis pariatur excepteur ullamco id eu laborum anim esse. Ut elit nisi exercitation anim elit consectetur velit officia laboris quis et. Occaecat consequat duis duis tempor ullamco dolor anim tempor non occaecat occaecat irure dolore."
  },
  {
    "userId": 2,
    "id": 13,
    "title": "This is a longer title",
    "body": "Excepteur veniam deserunt eu fugiat occaecat voluptate Lorem fugiat officia proident laboris pariatur minim laboris qui. Reprehenderit veniam eu duis anim incididunt adipisicing dolor officia. Ad et magna sint sit sint nisi officia labore do deserunt ut velit quis tempor do nulla adipisicing. Sit aliqua incididunt fugiat aute ex mollit ea aliquip et magna ut id deserunt ut. Dolore ullamco qui sunt Lorem cillum aliquip exercitation. Irure cillum laboris sit eu tempor dolore proident consectetur irure laboris eiusmod reprehenderit."
  }
];


// Assume that this data came from the second API call
let api2Resp = [
  {
    "id": 1,
    "name": "Lera",
    "username": "Lera2",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8edc5e886cbc7c5">[email protected]</a>",
    "address": {
      "street": "GGa",
      "suite": "Ap3. 333",
      "city": "Gwee",
      "zipcode": "2222-3333",
      "geo": {
        "lat": "-11213",
        "lng": "312424"
      }
    }
  },
  {
    "id": 2,
    "name": "John",
    "username": "Big John",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba389a5a0bdbda5acafa6a6bde7aaa6a4">[email protected]</a>",
    "address": {
      "street": "123 Street",
      "suite": "",
      "city": "Smallville",
      "zipcode": "12345-6789",
      "geo": {
        "lat": "-11213",
        "lng": "312424"
      }
    }
  }
];

// Transform the array into an object where the user id is the key and the user info object is the value.
// This simplifies data retrieval.
let userList = api2Resp.reduce(
  (newUserList, user) => {
    newUserList[user.id] = user;
    return newUserList;
  }, {}
);


// Generate all of the output
let html = api1Resp.map(
  topic => {
    // Try to retrieve the user info from the topic
    let user = userList[topic.userId];
    // If user is undefined it means it's not in the list

    return `
    <div class="topic" id="topic:${topic.id}">
      <h2>${topic.title}</h2>
      <div class="author">By: <a href="mailto:${user.email}">${user.username}</a></div>
      <div class="body">${topic.body.replace(/\n/g, '<br/>\n')}</div>
    </div>`;
  }
).join('\n');

let el = document.getElementById('output');
el.innerHTML = html;

<div id="output"></div>

Navigating JSON Data with ES6 Iteration

Answer №1

Answer №2

Similar questions

What could be causing my jQuery handler to not capture my form submission?

Retrieve information using JSON.parse from an ajax request

`Automatic toggling between two inputs with adjustable settings`

Creating a user-friendly three step wizard on a single webpage using the dynamic duo of AJAX and PHP

jquery plugin causing issues with bootstrap button functionality

Even after defining routes, Node Express continues to throw a 404 error

Establishing Node.js environment variables when invoking `npm run` command

Should we be concerned about the ethics of running javascript that is fetched through an AJAX request?

What is the mechanism behind the setTimeout function as an asynchronous timer when we specify a specific duration?

Revoke the prior invocation of the Google Maps geocoding function

What is the method for renaming Props in Vue components?

Install the following packages using npm: tailwindcss, postcss, autoprefixer, error, and next

A guide to accessing a specific worksheet on a Sharepoint Excel spreadsheet using Python

Guide to inserting literal newline and carriage return characters into a CSV file using DictWriter in Python

Modifying alignment of buttons in React components

Different Ways to Access an Array in an EJS Template

Removing error messages upon form reset initiated by an API request

Run a series of promises in an array one after the other without relying on async and await

Storing a JSON object within a data attribute in HTML using jQuery

Shuffle letters in a word when hovered over, then unscramble them back to their original order