How to loop through 2 arrays to create a new key/value object

Question

I've got 2 arrays - countryNames and countryCodes. The index sequence of items inside those arrays align as they come from the same API, i.e. countryNames[0] is Afghanistan and countryCodes[0] is "AF" etc.

I am trying to create a new, seperate object to store the data in key/value pairs neatly (like JSON object does) but I had no success yet. Somebody suggested to loop through them but I'm not too sure how to do that. Any help would be much appreciated!

Below is the only code that I had some kind of success with. It gives me an object (albeit weird looking one) but it doesn't store the data in key / value pair relationship.

 var keys = [];
 var values = [];


 fetch("https://restcountries.eu/rest/v2/all")
.then((response) => {
    return response.json();
})
.then((data) => {
    const codes = data.map(item => item.alpha2Code);
    values.push(codes);

    const names = data.map(item => item.name);
    keys.push(names);

    var result = [];
    keys.forEach((key, i) => result[key] = values[i]);
    console.log(result);
});

I just want to have something like -
{
CountryName: CountryCode,
2ndCountryName: 2ndCountryCode,
3rdCounryName: 3rdCountryCode,
etc.....
};

Possible duplicate of [Creating a JavaScript Object from two arrays](https://stackoverflow.com/questions/39127989/creating-a-javascript-object-from-two-arrays) — benvc, Sep 27 '19 at 14:53
I am aware of the similar question being asked and I have tried every solution proposed there - nothing worked for me, and I am unsure why. I have managed to make it work with the code below that I marked to be the most helpful. Thanks all! — Rogozin, Sep 27 '19 at 19:19

score 1 · Accepted Answer · answered Sep 27 '19 at 15:00

Array.reduce to the rescue:

fetch("https://restcountries.eu/rest/v2/all")
  .then((response) => {
    return response.json();
  })
  .then((data) => {
      const result = data.reduce((countries, item)=> {
       countries[item.name] = item.alpha2Code;
        return countries;
      }, {});
      console.log(result);
  });

if you want to learn more about it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

score 0 · Answer 2 · answered Sep 27 '19 at 14:58

0

fetch("https://restcountries.eu/rest/v2/all").then((response) => {
 return response.json();
}).then((data) => {
 var result = {}
 for (var i = 0; i < data.length; i++) {
  result[data[i].name] = data[i].alpha2Code;
 }
 console.log(result);
});

answered Sep 27 '19 at 14:58

Julian Vizcaino

163
4

score 0 · Answer 3 · answered Sep 27 '19 at 14:59

0

fetch("https://restcountries.eu/rest/v2/all")
.then((response) => {
    return response.json();
})
.then((data) => {
  const results = data.reduce((agg, item) => {
    agg[item.name] = item.alpha2Code
    return agg
  }, {})
  console.log(results)
})

answered Sep 27 '19 at 14:59

niccord

764
4
20

1

Please don't post only code as an answer, but include an explanation what your code does and how it solves the problem of the questions. Answers with an explanation are generally of higher quality, and more likely to attract upvotes. – Mark Rotteveel Sep 27 '19 at 18:09

score 0 · Answer 4 · answered Sep 27 '19 at 15:04

var keys = [];
 var values = [];


 fetch("https://restcountries.eu/rest/v2/all")
.then((response) => {
    return response.json();
})
.then((data) => {
    const codes = data.map(item => item.alpha2Code);
    values.push(codes);

    const names = data.map(item => item.name);
    keys.push(names);

    var result = [];
    
    keys[0].forEach((key, i) => {
       const obj = {};
       obj[values[0][i]] = key;       
       result.push(obj);
     }
    );
    
    console.log(result);
});

How to loop through 2 arrays to create a new key/value object

4 Answers4