Tips on how to iterate through a JSON object and store its values in an array

Question

Tips on how to iterate through a JSON object and store its values in an array

I am attempting to extract values from an external JSON file and store certain values in an array. Here is my code :

$.getJSON("https://link.to.my.json", function(data) {
    console.log(data); // this will display the information in the console
});

I am able to retrieve data from the JSON file, but I am unsure how to add the first and last names to the array [bob rooppo, peter sticker]. Any assistance on this matter would be greatly appreciated. Below is an example of the JSON data:

{
  "users": [
    {
      "test": "123",
      "name": {
        "first": "bob",
        "last": "roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d202d0f28222e2623612c2020">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "peter",
        "last": "sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7b6e7f6e794b6c666a626725686466">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
}

javascript arrays json ajax

Answer 1

Answer №1

You can easily utilize the Array#map method:

data.users.map(e =>
  (e.name.first ? e.name.first : '') + //Deals with the first name
  (e.name.first ? ' ' : '') +          //Adds a space between names
  (e.name.last ? e.name.last : '')     //Handles the last name
);

Example:

const data = {
  "users": [
    {
      "test": "123",
      "name": {
        "first": "bob",
        "last": "roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3ae8caba1ada5a0e2afa3a1">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "peter",
        "last": "sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06766372637446616b676f6a2865696b">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
};

let result = data.users.map(e => (e.name.first ? e.name.first : '') + (e.name.first ? ' ' : '') + (e.name.last ? e.name.last : ''));
console.log(result);

Answer 2

You can easily utilize the Array#map method:

data.users.map(e =>
  (e.name.first ? e.name.first : '') + //Deals with the first name
  (e.name.first ? ' ' : '') +          //Adds a space between names
  (e.name.last ? e.name.last : '')     //Handles the last name
);

Example:

const data = {
  "users": [
    {
      "test": "123",
      "name": {
        "first": "bob",
        "last": "roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3ae8caba1ada5a0e2afa3a1">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "peter",
        "last": "sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="06766372637446616b676f6a2865696b">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
};

let result = data.users.map(e => (e.name.first ? e.name.first : '') + (e.name.first ? ' ' : '') + (e.name.last ? e.name.last : ''));
console.log(result);

Answer 3

Answer №2

To extract names from data, you can utilize the map method:

data.users.map( user => (user.name.first || "") + " " + (user.name.last || "") );

If both first and last names are always present in the data, you can simplify the code like this:

data.users.map( user => user.name.first + " " + user.name.last );

Here's a Demo:

var data = {
  "users": [
    {
      "test": "123",
      "name": {
        "first": "Bob",
        "last": "Roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1aca683a4aea2aaafeda0acae">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "Peter",
        "last": "Sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b9acbdacbb89aea4a8a0a5e7aaa6a4">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
};

var output = data.users.map(user => user.name.first + " " + user.name.last);

console.log(output);

Answer 4

To extract names from data, you can utilize the map method:

data.users.map( user => (user.name.first || "") + " " + (user.name.last || "") );

If both first and last names are always present in the data, you can simplify the code like this:

data.users.map( user => user.name.first + " " + user.name.last );

Here's a Demo:

var data = {
  "users": [
    {
      "test": "123",
      "name": {
        "first": "Bob",
        "last": "Roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1aca683a4aea2aaafeda0acae">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "Peter",
        "last": "Sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b9acbdacbb89aea4a8a0a5e7aaa6a4">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
};

var output = data.users.map(user => user.name.first + " " + user.name.last);

console.log(output);

Answer 5

Answer №3

To iterate over the JSON data and extract user names, you can utilize the forEach() method:

var json = {
  "users": [
    {
      "test": "123",
      "name": {
        "first": "bob",
        "last": "roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a777a587f75797174367b7775">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "peter",
        "last": "sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09796c7d6c7b496e64686065276a6664">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
}

var res = [];
json.users.forEach(function(p){
  var name = p.name.first + ' ' + p.name.last;
  res.push(name);
});
console.log(res);

Answer 6

To iterate over the JSON data and extract user names, you can utilize the forEach() method:

var json = {
  "users": [
    {
      "test": "123",
      "name": {
        "first": "bob",
        "last": "roppo"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a777a587f75797174367b7775">[email protected]</a>",
      "phone": "+123456789"
    },
    {
      "test": "124",
      "name": {
        "first": "peter",
        "last": "sticer"
      },
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09796c7d6c7b496e64686065276a6664">[email protected]</a>",
      "phone": "+123456789"
    }
  ]
}

var res = [];
json.users.forEach(function(p){
  var name = p.name.first + ' ' + p.name.last;
  res.push(name);
});
console.log(res);

Tips on how to iterate through a JSON object and store its values in an array

Answer №1

Answer №2

Answer №3

Similar questions

The Express server's `GET` request at the root does not seem

Transition effortlessly between web pages with subtle fading effects

Why is my backend sending two Objects in the http response instead of just one?

Executing multiple ajax calls and retrieving the results: A step-by-step guide

Having a single quote within a double quote can cause issues with JavaScript code

Is it possible to use a Wcf polling duplex service with a client that is not using Silverlight?

Having trouble documenting the procedures for adding a student and removing a student from an arrayList

Iterating through a jQuery function to increment value

Postpone the inclusion of html files within ng-include in AngularJS

Technique for dynamically incorporating Csrf tokens prior to every ajax request in CakePHP

Retrieving Form Validation Error Value in AngularJS

Error in Sequelize database: Column name does not exist in the database

Learning how to implement server-side processing with Django using datatables for beginners

Sending Svelte data to Javascript with an onclick event

Utilize jQuery and HTML simplistically to display or conceal divs throughout a webpage

Having trouble retrieving data from json_encode using jQuery AJAX and php

AngularJS $routeParams is not defined

Highcharts is experiencing a duplication issue with the Y-Axis Series

Converting an object with a combination of different index types into a string representation

Submit a post request using a Trigger.io-powered mobile application