Create multi-dimensional array index in Javascript?

Question

I have a ajax request that is returning to me an object that looks roughly like the following:

[
 {category: "Test Category", id: "1", name: "Test",  language: "English"},
 {category: "Test Category", id: "2", name: "Test2", language: "English"},
 {category: "A test",        id: "3", name: "Test3", language: "Spanish"},
 {category: "Test Category", id: "4", name: "Test4", language: "Spanish"}
]

Basically I need a way to do the following:

List all categories that exist in ONLY English or Spanish
List all ID's that exist in a specified language
List all ID's that exist in a specified category

Now I'm fairly sure the best route to do this is to create my own temp arrays that can house that data but I'm not confident enough in Javascript to write the correct loop to get that data. I know in PHP I'd do something like $category['Test Category'][] = 3 while looping.

The idea is I need the ability to filter things based on the user selecting to filter by English and then by a category within that.

Can someone point me in the right direction?

That sounds like a lot of work. Instead, use underscore.js - underscorejs.org. You can use filter, pluck, map, and so forth. — Mike Robinson
– Mike Robinson, Commented Dec 20, 2012 at 21:48
You can do something like you do in PHP, except $arr[] = $x is arr.push(x) — John Dvorak
– John Dvorak, Commented Dec 20, 2012 at 21:49
don't forget arr = arr || [] which creates a new array if it doesn't exist. — John Dvorak
– John Dvorak, Commented Dec 20, 2012 at 21:50
Or if you use jquery, use jquery grep api.jquery.com/jQuery.grep — Artem
– Artem, Commented Dec 20, 2012 at 21:51

Peter · Accepted Answer · 2012-12-20 22:14:30Z

3

Some ways to use underscore for your tasks: http://underscorejs.org

var data = [
 {category: "Test Category", id: "1", name: "Test",  language: "English"},
 {category: "Test Category", id: "2", name: "Test2", language: "English"},
 {category: "A test",        id: "3", name: "Test3", language: "Spanish"},
 {category: "Test Category", id: "4", name: "Test4", language: "Spanish"}
]

// Filter by spanish
var output = _.where(data, {"language":"Spanish"});

// Filter by category
var output = _.where(data, {"category":"A test"});

// List specific category ids
var output = _.pluck(_.where(data, {"category":"A test"}), "id");

// List category names
var output = _.pluck(_.where(data, {"language":"English"}), "category");

// Group by languages
var output = _.groupBy(data, function(value) { 
  return value.language
});
output["English"];

edited Dec 20, 2012 at 22:14

Peter

3,19412 gold badges39 silver badges57 bronze badges

answered Dec 20, 2012 at 21:56

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

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

4 Comments

John Dvorak Over a year ago

Who, are you; a dating agent? Because you're making me fall in love with underscore.js ;-)

Peter Over a year ago

No no I agree with Jan. I may use this :)

John Dvorak Over a year ago

What's the point of _.invoke? It looks like a _.map with eval.

Mike Robinson Over a year ago

More like an '_.each' with 'eval'. Underscore is all about convenience and brevity, and one of the things you learn early on is that you can do almost everything with _.each, but shouldn't.

Justin Bicknell · Accepted Answer · 2012-12-20 21:51:54Z

2

Since you included jQuery in the tag I thought I would use it:

//All categories with English or spanish language (categories is the array)
$.grep(categories, function(c) { return c.language=='English' || c.language == 'Spanish'; });

answered Dec 20, 2012 at 21:51

Justin Bicknell

4,81620 silver badges27 bronze badges

Comments

Brian Ustas · Accepted Answer · 2012-12-20 22:27:01Z

Using vanilla JS, where json is your original array, you could use:

function filterJson(attr, obj) {
    var attrList = [],
        match,
        tempAttr,
        i;

    for (i = 0; i < json.length; i += 1) {
        match = true;

        for (tempAttr in obj) {
            if (!obj[tempAttr].test(json[i][tempAttr])) {
                match = false;
                break;
            }
        }

        if (match) attrList.push(json[i][attr]);
    }

    return attrList;
}

And use it like this:

"List all categories that exist in ONLY English or Spanish"

filterJson('category', {
    language: /(English|Spanish)/
});
// => ["Test Category", "Test Category", "A test", "Test Category"]

"List all ID's that exist in a specified language"

filterJson('id', {
    language: /English/
});
// => ["1", "2"]

"List all ID's that exist in a specified category"

filterJson('id', {
    category: /Test Category/
});  
// => ["1", "2", "4"]

Randy Hunt · Accepted Answer · 2012-12-20 22:01:59Z

0

If you can count on a few assumptions about the data always being true -- eg, that you'll only ever have category:, id:, name:, and language:, and that there will never be a colon or comma anywhere in the name or category -- then I would actually suggest sticking all the information into single strings and use RegExp to find it.

Eg:

[
 "category:Test Category, id:1, name:Test,  language:English",
 "category:Test Category, id:2, name:Test2, language:English",
 "category:A test,        id:3, name:Test3, language:Spanish",
 "category:Test Category, id:4, name:Test4, language:Spanish"
]

Now, to find a values for an entry, use RegExp.match().

var m = /^category:([^,]+)\s+id:(\d+),\s+name:([^,]+),\s+language:(.+)$/i;
// m[1] = Test Category
// m[2] = 1;
// m[3] = Test2
// m[4] = Spanish

And you can search by using tests.

function my_filter(criteria) {
    var results = [];
    var re = new RegExp(criteria);
    for (var i=0; i<array.length; i++) {
        if (array[i].test(re))
            results.push(array[i]);
    }
    return results;
}
var english_array = my_filter('language:english');
var atest_array = my_filter('category:a test');

answered Dec 20, 2012 at 22:01

Randy Hunt

4253 silver badges10 bronze badges

2 Comments

Mike Robinson Over a year ago

Can you explain your logic for suggesting this solution? It's different and I'm curious about the benefits.

Randy Hunt Over a year ago

Regex parsing is powerful, and more importantly... native in the browser, so it's likely to be much faster than a complex javascript parsing. If you need to, you can match easily on multiple criteria just by altering the regular expression. Whenever I work with relatively simple data, I find it much easier and faster to work natively with strings.

robrich · Accepted Answer · 2012-12-20 21:53:22Z

-1

The magic Google terms are "map" and "reduce".

var data = [...the JSON data parsed with JSON.parse() if necessary...]

var categoriesInEnglish = data.reduce(function(accumulator, category) {
    if(category.language = 'English') {
        accumulator.push(category.id);
    }
});

see http://www.mrspeaker.net/2011/05/02/conventional-interfaces/ and http://www.mrspeaker.net/2011/04/27/reducing-map/

answered Dec 20, 2012 at 21:53

robrich

13.3k7 gold badges39 silver badges63 bronze badges

3 Comments

John Dvorak Over a year ago

What's the accumulator on the first call? I doubt it's an empty array.

robrich Over a year ago

It's the array of answers. If you're going for ultimate compatability, jQuery's $.map() and $.grep() are probably simpler implementations.

John Dvorak Over a year ago

This won't work. When the callback is first called, its first argument is the first element of the array. Additionally, on each subsequent call, the accumulator is undefined, throwing a TypeError.

Collectives™ on Stack Overflow

Create multi-dimensional array index in Javascript?

5 Answers 5

4 Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related