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

Exploring the magic of VueJS: Implementing computed properties for "set/get" functionalities in tandem with Vue.Draggable and

The output of the http.get or http.request callback is only visible within the shell when using node.js

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

What is the most efficient way to organize these arrays?

Updating a .txt file using JavaScript

Mongoose and ES6 promises are not delivering the expected results

Encounter the following issue: Unable to access property '0' due to being undefined

Generating, establishing aesthetics for a specific span

Changing the route variable in React Native's bottom bar tab functionality

What steps can be taken to ensure that the popover div remains visible when clicking inside it in a "dismissible popover" using Twitter Bootstrap with the data-trigger attribute set to "

JsonResult from MVC contains information, yet the browser is devoid of any data

Converting hexadecimal to binary using Javascript or Typescript before writing a file on an Android or iOS device

Express identifies the user, however, the username is displayed exclusively on one specific page. This situation may indicate a potential cookie problem

"I am interested in using the MongoDB database with Mongoose in a Node.js application to incorporate the

An issue arises in the NodeJS Express authentication process when attempting to set headers after they have already been sent,

What could be causing the never-ending page reloads on a PWA Vue application?

Nginx and Socket.io: Issues with client-server connection not functioning properly

Is there a way to showcase the generated results on a graph after the user presses the submit button?

How do I retrieve the child elements of an array from a JSON response in ReactJS?

Encountering an issue with a loop in my jQuery function - any solutions?