javascript manipulating objects: map

Question

I need to get a new object countriesFiltered , filtering just countries with population under a billion. I'm using in the map part: return { key : countries[key]}. I think is not correct, how i can build a new object ? i must use push or something like that?

var countries = {
    China: 1371980000,
    India: 1276860000,
    'United States': 321786000,
    Indonesia: 255461700,
    Brazil: 204873000,
    Pakistan: 190860000
};
var countriesFiltered = Object.keys(countries).filter(function(key) {
    return countries[key] <= 1000000000;
}).map(function(key) {
    return { key : countries[key]};
});
console.log(countriesFiltered);

Answer 1

Close! Just use Array.reduce instead of Array.map. Object property names can't be computed unless you are using ES2015. So you need to use reduce to construct a new object and then assign each property individually.

var countries = {
  China: 1371980000,
  India: 1276860000,
  'United States': 321786000,
  Indonesia: 255461700,
  Brazil: 204873000,
  Pakistan: 190860000
};
var countriesFiltered = Object.keys(countries).filter(function(key) {
  return countries[key] <= 1000000000;
}).reduce(function(obj, key) {
  // Assign key/val to new object
  obj[key] = countries[key];
  
  return obj;
}, {});

document.write('<pre>' + JSON.stringify(countriesFiltered, null, 2) + '</pre>');

EDIT: Using ES2015 computed name properties would look something like the following. Note this will only work in supported browsers.

var countries = {
  China: 1371980000,
  India: 1276860000,
  'United States': 321786000,
  Indonesia: 255461700,
  Brazil: 204873000,
  Pakistan: 190860000
};
var countriesFiltered = Object.keys(countries).filter(function(key) {
  return countries[key] <= 1000000000;
}).reduce(function(obj, key) {
  // Create object with computed property name
  // and assign to obj
  return Object.assign(obj, {
    [key]: countries[key]
  });
}, {});

document.write('<pre>' + JSON.stringify(countriesFiltered, null, 2) + '</pre>');

Bonus: for fun you could use the replacer function to leverage the power of JSON.stringify to filter the object. While it does show there are a lot of different approaches to solving this I wouldn't recommend this approach.

var countries = {
  China: 1371980000,
  India: 1276860000,
  'United States': 321786000,
  Indonesia: 255461700,
  Brazil: 204873000,
  Pakistan: 190860000
};
var countriesFiltered = JSON.parse(JSON.stringify(countries, filterCountries));

function filterCountries(key, val) {
  if (val > 1000000000) {
    return undefined;
  }

  return val;
}

document.write('<pre>' + JSON.stringify(countriesFiltered, null, 2) + '</pre>');

Answer 2

Try using the following function:

Object.filter = (obj, predicate) => 
    Object.keys(obj)
          .filter(key => predicate(obj[key]))
          .reduce((res, key) => (res[key] = obj[key], res), {});


var filtered = Object.filter(countries, countrie => countrie <= 1000000000); 
console.log(filtered);

This should do it for you!

Reference: JavaScript: filter() for Objects

Answer 3

I am not 100% sure what you are looking for but if you are looking for a new object with each country name as the property and the population you can try.

var countries = {
  China: 1371980000,
  India: 1276860000,
  'United States': 321786000,
  Indonesia: 255461700,
  Brazil: 204873000,
  Pakistan: 190860000
};
var countriesFiltered = {};
Object.keys(countries).filter(function(key) {
  return countries[key] <= 1000000000;
}).map(function(key) {
  countriesFiltered[key] = countries[key];
});
console.log(countriesFiltered);

This results in:

{
    United States: 321786000, 
    Indonesia: 255461700, 
    Brazil: 204873000, 
    Pakistan: 190860000
}

If you want an array of Key Value Pairs you could try.

var countries = {
  China: 1371980000,
  India: 1276860000,
  'United States': 321786000,
  Indonesia: 255461700,
  Brazil: 204873000,
  Pakistan: 190860000
};
var countriesFiltered = Object.keys(countries).filter(function(key) {
  return countries[key] <= 1000000000;
}).map(function(key) {
    return { country: key, population: countries[key]}; 
});
console.log(countriesFiltered);

EDIT: Answer to comment

what does mean exactly, reausable, where i can read about that ?

If you review @answer-38909742 you will see that they have modified the Object type and added a static method Object.filter() with the signature of Object.filter = (obj, predicate) => {}

This then makes it reusable and not limited to the scope of the function but to any object.

If this was placed in a global script somewhere in your application you can then resuse this method on any object in any scope.

As stated in his question simply by calling.

Object.filter(countries, countrie => countrie <= 1000000000); 

Answer 4

Object has only unique keys. So if your countries are going to be unique then you can use the following code:

    var countries = {
      China: 1371980000,
      India: 1276860000,
      'United States': 321786000,
      Indonesia: 255461700,
      Brazil: 204873000,
      Pakistan: 190860000
    };
var countriesFiltered = {};

for ( var country in countries ) {
   if ( countries[country] <= 1000000000 ) {
      countriesFiltered[country] = countries[country];
   }
}

console.log(countriesFiltered);

Answer 5

Well I will try to understand your problem instead of giving you a different solution. Actually if you want to assign a variable as a key in a javascript object there is a different way for that. eg.

var obj = {};
var key = 'abc';
obj[key] =  123;

You wont be able to assign a variable as a key directly to an object.

var key = 'abc';
var obj = {key : 123}

It would result in an error.

Here is your answer

 var countries = {
    China: 1371980000,
    India: 1276860000,
    'United States': 321786000,
    Indonesia: 255461700,
    Brazil: 204873000,
    Pakistan: 190860000
};
var countriesFiltered = Object.keys(countries).filter(function(key) {
    return countries[key] <= 1000000000;
}).map(function(key) {
    var obj = {};
    obj[key] = countries[key];
    return obj;
}).reduce(function(prevKey, currentKey) {
    return Object.assign(prevKey , currentKey);
})
    console.log(countriesFiltered);

Follow this good post already posted for the same. JavaScript set object key by variable