JS filtering array in object property of array of objects

Question

I have js object like this

var continents = [
0: {
       short: 'na',
       countries: [
           {
               name: 'canada'
           },
           {
               name: 'usa'
           },
           //...
       ]

   },
   1: {
       short: 'sa',
       countries: [
           {
               name: 'chile'
           },
           {
               name: 'colombia'
           }
       ]

     },
//...
]

I want to filter this object for matches with country name (contents.countries.name) with some string (example 'col') Example filter function

filter(item => {
    return item.name.toLowerCase().indexOf('col'.toLowerCase()) >= 0;
});

Expecting result:

  1: {
       short: 'sa',
       countries: [
           {
               name: 'colombia'
           }
       ]
     }

Mr. Polywhirl · Accepted Answer · 2017-12-18 15:58:46Z

You need to not only filter on the continents, but the countries within them.

This is a two-part filter, as seen below.

var continents = [{
  short: 'na',
  countries: [
    { name: 'canada' },
    { name: 'usa' }
  ]
}, {
  short: 'sa',
  countries: [
    { name: 'chile' },
    { name: 'colombia' }
  ]
}];

function filterByKeyValue(arr, keys, val) {
  return arr.filter(item => {
    return item[keys[0]].some(subitem => subitem[keys[1]].indexOf(val) > -1);
  }).map(item => {
    item[keys[0]] = item[keys[0]].filter(subitem => subitem[keys[1]].indexOf(val) > -1);
    return item;
  });
}

var filtered = filterByKeyValue(continents, [ 'countries', 'name' ], 'col');

console.log(filtered);

.as-console-wrapper { top: 0; max-height: 100% !important; }

<!--

Original filter that method is based on.

var filtered = continents.filter(continent => {
  return continent.countries.some(country => country.name.indexOf('col') > -1);
}).map(continent => {
  continent.countries = continent.countries.filter(country => country.name.indexOf('col') > -1);
  return continent;
});

-->

David Anthony Acosta · Accepted Answer · 2017-12-18 15:57:06Z

0

item in this case has two properties, countries and short. You are trying to run .name on item, which doesn't exist. You need to run .name on either item.countries[0].name or item.countries[1].name.

    var continents = [
        {
            short: 'na',
            countries: [
                {
                    name: 'canada'
                },
                {
                    name: 'usa'
                }
            ]

        },
        {
            short: 'sa',
            countries: [
                {
                    name: 'chile'
                },
                {
                    name: 'colombia'
                }
            ]

        }
    ];

    var results = continents.filter(item => {
        return item.countries[0].name.toLowerCase().indexOf('col'.toLowerCase()) >= 0 || 
item.countries[1].name.toLowerCase().indexOf('col'.toLowerCase()) >= 0
    });

    console.log(results);

Working example: https://jsfiddle.net/gugui3z24/fnw5kf0x/

edited Dec 18, 2017 at 15:57

answered Dec 18, 2017 at 15:52

David Anthony Acosta

4,9381 gold badge21 silver badges21 bronze badges

1 Comment

omnomah Over a year ago

Yes. I have 6 continents and over 250 countries inside them. i look for the solution how to loop through them and filter

Luke Stoward · Accepted Answer · 2017-12-18 15:59:58Z

0

You can use the filter function to return just the items that match a condition. Like so:

const matches = [];
continents.forEach((continent) => {

  const countries = continent.countries.filter((country) => {
    return country.name.includes('col');
  });

  matches.push(...countries);
});

Note: I have used the spread operator ... to flattern the array (avoiding an array of arrays).

answered Dec 18, 2017 at 15:59

Luke Stoward

1,54016 silver badges26 bronze badges

Comments

David Anthony Acosta · Accepted Answer · 2017-12-18 16:00:58Z

For a loop you could use:

var continents = [
    {
        short: 'na',
        countries: [
            {
                name: 'canada'
            },
            {
                name: 'usa'
            }
        ]
    },
    {
        short: 'sa',
        countries: [
            {
                name: 'chile'
            },
            {
                name: 'colombia'
            }
        ]
    }
];

var results = continents.filter(item => {
    for (let x = 0; x < item.countries.length; x++) {
        if (item.countries[x].name.toLowerCase().indexOf('usa') > -1) {
            return item;
            break;
        }
    }
});

console.log(results);

Working example: https://jsfiddle.net/gugui3z24/fnw5kf0x/2/

Nina Scholz · Accepted Answer · 2017-12-18 16:21:02Z

You could try to filter the countries and if one found, push the outer continent as well to the result set.

function getItems(name) {
    var result = [];

    continents.forEach(function (continent) {
        var countries = continent.countries.filter(function (country) {
            return country.name.startsWith(name);
        });
        if (countries.length) {
            result.push({ short: continent.short, countries: countries });
        }
    });
    return result;
}

var continents = [{ short: 'na', countries: [{ name: 'canada' }, { name: 'usa' }] }, { short: 'sa', countries: [{ name: 'chile' }, { name: 'colombia' }] }];

console.log(getItems('col'));

.as-console-wrapper { max-height: 100% !important; top: 0; }

Collectives™ on Stack Overflow

JS filtering array in object property of array of objects

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related