Filter nested array of objects by object property in d3.js

Question

I have a meteorite landings dataset.
I nested the data in four keys, by type:

  var dataByType = d3.nest()
    .key(function(d) {
          return d.rectype;
    })
    .entries(dataset); // the original array

This is the resulting structure: data

Now I want to create new arrays, filtering the nested one: I want each filtered array to contain only the objects whose "mass" property is inside a defined range.
So I tried this:

// filter small meteorites
var lightWeight = dataByType.forEach(function(d){
      d.values.filter(function (object) {
            var mass = object.mass;
            return mass <= 100;
      });
  });

But it returns undefined.

Nesting is giving me a lot of trouble! What do I do wrong?
Thanks in advance

Try to use map instead of forEach and return d. Like var lightWeight = dataByType.map(function(d){ d.values.filter(function (object) { var mass = object.mass; return mass <= 100; }); return d; }); — Stan Liu
– Stan Liu, Commented Sep 11, 2017 at 21:43
@ben I tried forEach(function(d, i){ d.values[i].filter(...) but it returns an error saying "d.values[i].filter is not a function" — Léonie
– Léonie, Commented Sep 12, 2017 at 16:53
@chsdk I'm sorry, I'm a newbie and can't figure out how to do that from the Firefox console — Léonie
– Léonie, Commented Sep 12, 2017 at 16:55

Ben · Accepted Answer · 2017-09-12 19:13:32Z

3

I think you're overwriting lightWeight on each pass of that forEach. Instead try creating lightWeight as its own object, then adding the keys you want in the loop:

const lightWeight = {};

dataByType.forEach(function(d){
  lightWeight[d.key] = d.values.filter(function (object) {
    var mass = object.mass;
    return mass <= 100;
  });
});

Working pen which (I think?) is doing what you want: https://codepen.io/benjaminwfox/pen/veBjrP?editors=0012

answered Sep 12, 2017 at 19:13

Ben

5,6952 gold badges24 silver badges32 bronze badges

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

4 Comments

Léonie Over a year ago

Many thanks, this does exactly what I need! So my mistake was not assigning the results to keys, inside the loop.. But then, why did I get undefined instead of an array with only the last result? Is it important to declare lightWeight as const instead of var?

Ben Over a year ago

const vs var is syntactic difference between two versions of JavaScript (ES6 vs ES5). That's not actually relevant to the solution, it's just the syntax I've been using lately. I'll see if I can get an explanation for why it ended up undefined.

Ben Over a year ago

So the reason you were getting undefined is because you were trying to assign the return value of a forEach loop which, be design, returns undefined. See the MDN page: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…, and more info on the SO question: stackoverflow.com/questions/34653612/… Your .filter() function only returned the value of mass inside the scope of the forEach loop.

Léonie Over a year ago

Thankyou very much for your patience!

Jonny Rathbone · Accepted Answer · 2017-09-11 21:44:14Z

0

I couldn't speak for what your dataset looks like, but could it just be that you're not returning lightWeight at the end?

answered Sep 11, 2017 at 21:44

Jonny Rathbone

1797 bronze badges

Comments

Stan Liu · Accepted Answer · 2017-09-11 22:17:26Z

0

I am unsure what you are trying to filter on exactly, but try to use map instead of forEach and you need to return d in the iterators, anon function.

Like the following:

var lightWeight = dataByType.map(function(d) {
    d.filteredValues = d.values.filter(function (object) {
        return object.mass <= 100;
    });
    return d;
});

edited Sep 11, 2017 at 22:17

answered Sep 11, 2017 at 21:46

Stan Liu

2103 silver badges8 bronze badges

4 Comments

cнŝdk Over a year ago

Actually filter() method will return a new array and does not change the array in-place, so this code won't be helpful.

Stan Liu Over a year ago

What if you stored it in another key within the object, like filteredValues?

cнŝdk Over a year ago

This will affect the initial array structure, but any way if you wanted so you could just do d.values = d.values.filter(...).

Léonie Over a year ago

@StanleyLiu Yes this works, but changes the original array. In the end, though, I only need to group the data by 5 intervals of mass value, and this might do. I just hope it won't make accessing the data more difficult later. I'll try! Thanks

cнŝdk · Accepted Answer · 2017-09-11 22:32:21Z

0

Assuming that you got the data in the format you shared, where for each item of data you have a key property and a values array.

If you want to filter the values array by the mass property of each entry, you will need to use a combination of .map() and .filter() methods.

This is how should be your code:

var lightWeight = data.map(function(d){
    var obj = {};
    obj.key = d.key;
    obj.values = d.values.filter(function (object) {
            return object.mass <= 100;
    });
    return obj;
});

This will give you the expected results.

edited Sep 11, 2017 at 22:32

answered Sep 11, 2017 at 22:10

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

2 Comments

Léonie Over a year ago

I tried this, but still got an error saying "d.values is undefined"

cнŝdk Over a year ago

@Léonie normally this will work perfectly, can you please show us a Demo where you got this error, what data have you used?

Collectives™ on Stack Overflow

Filter nested array of objects by object property in d3.js

4 Answers 4

4 Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related