Javascript Array of Objects and Unique Values

Question

I have an array of objects that looks like this:

[
{"name":"Andrea","from":"USA","Food":"Candy"},
{"name":"Matt","from":"Taiwan","Food":"Chicken"},
{"name":"Roddy","from":"USA","Food":"Rice"},
{"name":"Andy","from":"Great Britain","Food":"Steak"},
];

Is there a way to get the list of all countries from the array above, and get rid of the repeated ones?

So from the list above, the list I am to obtain is:

["USA", "Taiwan", "Great Britain"]

Thank you!

Is the Order of countries important?

thefourtheye
– thefourtheye

2015-03-20 14:24:00 +00:00
Commented Mar 20, 2015 at 14:24 — thefourtheye
– thefourtheye, Commented Mar 20, 2015 at 14:24
No, the order of countries is not relevant.

Dan K.
– Dan K.

2015-03-20 14:33:04 +00:00
Commented Mar 20, 2015 at 14:33 — Dan K.
– Dan K., Commented Mar 20, 2015 at 14:33

KJ Price · Accepted Answer · 2015-03-20 14:31:22Z

4

Just loop over people and insert unique countries in a new array. Here is an example.

var countries = [];

var people = [
{"name":"Andrea","from":"USA","Food":"Candy"},
{"name":"Matt","from":"Taiwan","Food":"Chicken"},
{"name":"Roddy","from":"USA","Food":"Rice"},
{"name":"Andy","from":"Great Britain","Food":"Steak"},
];

for (var i = 0, l=people.length; i < l; i++) {
    if(people[i] && people[i].from) {//ensure country exists
        if (countries.indexOf(people[i].from) == -1) {//ensure unique
             countries.push(people[i].from);
        }
    }
}

answered Mar 20, 2015 at 14:31

KJ Price

6,0143 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dan K. Over a year ago

Is it possible to avoid loop if I can use d3 object? In real like I have around 1000+ rows and I'm hoping to avoid looping over them.

Abraham Adam Over a year ago

@DanielKuo you will have to at least look at everyone of them one time to filter the duplicates, unless you are using a different data structure from the start .

Dan K. Over a year ago

@AbrahamAdam What if I just want all possible countries and leave the duplicates as they are?

GregL Over a year ago

You still can't avoid having to process every record to extract the from property value. Unless you change the format your data arrives in (e.g. it is grouped by country already), there is no shortcut to looping over the rows. It will be plenty fast for 1000+ rows, though.

Grundy · Accepted Answer · 2015-03-20 14:42:47Z

3

Yet another variant with reduce

var arr = [
    {"name":"Andrea","from":"USA","Food":"Candy"},
    {"name":"Matt","from":"Taiwan","Food":"Chicken"},
    {"name":"Roddy","from":"USA","Food":"Rice"},
    {"name":"Andy","from":"Great Britain","Food":"Steak"},
];

var countries = arr.reduce(function(acc, cur){
                    if(!acc.map[cur.from]){
                        acc.map[cur.from]=true;
                        acc.result.push(cur.from);
                    }
                    return acc;
                }, {result:[], map:{}}).result;

var arr = [
    {"name":"Andrea","from":"USA","Food":"Candy"},
    {"name":"Matt","from":"Taiwan","Food":"Chicken"},
    {"name":"Roddy","from":"USA","Food":"Rice"},
    {"name":"Andy","from":"Great Britain","Food":"Steak"},
];

var countries = arr.reduce(function(acc, cur){
                    if(!acc.map[cur.from]){
                        acc.map[cur.from]=true;
                        acc.result.push(cur.from);
                    }
                    return acc;
                }, {result:[], map:{}}).result;

document.getElementById('countries').innerHTML = countries.join();

<span id="countries"></span>

answered Mar 20, 2015 at 14:42

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

5 Comments

KJ Price Over a year ago

Note that this does not work in ie8. Great solution otherwise!

GregL Over a year ago

Also, note this doesn't do away with looping over every record.

Grundy Over a year ago

@GregL there is only one loop, without any loop impossible select unique elements from array.

GregL Over a year ago

Agreed, I was just highlighting to Daniel that even though there is no obvious loop here, it is still doing a loop under the covers in the reduce() call. He was hoping to avoid looping over the whole array altogether, but like you said, it is impossible.

Dan K. Over a year ago

I see. Thank you so much for all your help. Somehow I just failed to see the necessity to loop through all elements to get all possible values. Thanks a ton again.

GregL · Accepted Answer · 2015-03-20 14:43:06Z

2

If you are already using the excellent Lodash library, the following will do it for you neatly in one line:

var uniqueCountries = _(dataArray).pluck('from').unique().value();

UnderscoreJS has similar functionality using chaining.

For D3.js, the following will do it:

var uniqueCountries = d3.set(dataArray.map(function (x) { return x.from; })).values();

Without doing the unique-ifying on the server and returning that data separately, there is no way to get around looping through all records at least once to do this. For 1000 records or so, though, this will still be very fast. For plain JS, see other answers.

edited Mar 20, 2015 at 14:43

answered Mar 20, 2015 at 14:32

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Comments

Tobias Kloss · Accepted Answer · 2015-03-20 14:30:03Z

1

I'd loop over the Array and put the country into an array if it is not yet inside that array.

answered Mar 20, 2015 at 14:30

Tobias Kloss

3382 gold badges4 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript Array of Objects and Unique Values

4 Answers 4

4 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related