Javascript filter array result

Question

i'm trying to do a javascript filter to an array but somehow im returning one array when it needs to be separated (0 first data 1 second data) so that I can process it easily in a another loop. I hope the below makes sense. Thank you in advance for any help.

JSON INPUT

[
    {
        "id": 1,
        "title": "Ford F-150",
        "type": "truck"
    },
    {
        "id": 2,
        "title": "BMW 4 series",
        "type": "car"
    },
    {
        "id": 3,
        "title": "Triumph Scrambler",
        "type": "motorbike"
    },
    {
        "id": 4,
        "title": "Audi A3",
        "type": "car"
    }
]

INTO data ARRAY THE FILTERED

function filterByProperty(array, prop, value){
    var filtered = [];

    for (var i = 0; i < array.length; i++) {
        var obj = array[i];

        for (var key in obj) {

            if (typeof(obj[key] === "object")) {
                var item = obj[key];

                if(obj[prop] == value){
                    filtered.push(item);
                }
            } else {
              console.log("not object");
            }
        }
    }    

    return filtered;
}


var filtereddata = filterByProperty(data, "type", "car");
console.log(filtereddata);

When I run this, I only see one array not two?

I don't understand the question. What is your expected output? — Hugo G
– Hugo G, Commented Jul 19, 2018 at 16:45
not sure how to say it but something like this [ { "id": 2, "title": "BMW 4 series", "type": "car" }, { "id": 4, "title": "Audi A3", "type": "car" } ] — Dev
– Dev, Commented Jul 19, 2018 at 16:48
You'll probably make your life a lot easier if you use the built in filter method available on arrays. You don't seem to need 2 different arrays, just one with objects that match a certain criterion, namely the type value of specific objects within the array you're filtering. — hcs
– hcs, Commented Jul 19, 2018 at 16:51

talvasconcelos · Accepted Answer · 2018-07-19 16:58:12Z

2

You're only pushing values to one array and returning one array. That's why you only get one array...

try it like this:

function filterProp(data, prop){
    return data.filter(el => {
        return el.type === prop
    })
}

Then just use like:

console.log(filterProp(data, 'car'))

Or if you need to specify the key:

function filterProp(data, key, prop){
    return data.filter(el => {
        return el[key] === prop
    })
}

console.log(filterProp(data, 'title', 'BMW'))

edited Jul 19, 2018 at 16:58

answered Jul 19, 2018 at 16:52

talvasconcelos

751 gold badge1 silver badge13 bronze badges

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

1 Comment

Stephen P Over a year ago

This is the only answer that actually answers the PO's question "When I run this, I only see one array not two?"

REDDY PRASAD · Accepted Answer · 2018-07-19 16:59:20Z

2

In ES6, arrays have builtin method .filter to filter items. Its sugar syntax for Array.prototype.filter()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const data = [
    {
        "id": 1,
        "title": "Ford F-150",
        "type": "truck"
    },
    {
        "id": 2,
        "title": "BMW 4 series",
        "type": "car"
    },
    {
        "id": 3,
        "title": "Triumph Scrambler",
        "type": "motorbike"
    },
    {
        "id": 4,
        "title": "Audi A3",
        "type": "car"
    }
];

const filter = (d, prop, value) => d.filter((obj) => obj[prop] === value);
const filtereddata = filter(data, "type", "car");

console.log(filtereddata);

edited Jul 19, 2018 at 16:59

answered Jul 19, 2018 at 16:53

REDDY PRASAD

1,4092 gold badges16 silver badges29 bronze badges

Comments

pete · Accepted Answer · 2018-07-19 17:05:42Z

First a note about typeof which is a keyword, not a function.

Using it like a function means it evaluates obj[key] == "object" first.
Since that evaluates to false, typeof then returns boolean because typeof false is boolean.

boolean is a truthy value, so you never hit your else clause.

That said, you can fix your function by:

eliminating the typeof check.
adding another check to make sure the key matches the passed in prop.
and pushing the obj into the array to return.

function filterByProperty(array, prop, value) {
    var filtered = [];
    for (var i = 0; i < array.length; i++) {
        var obj = array[i];
        for (var key in obj) {
            if (key === prop && obj[prop] == value) {
                filtered.push(obj);
            }
        }

    }

    return filtered;

}


const data = [{
        "id": 1,
        "title": "Ford F-150",
        "type": "truck"
    },
    {
        "id": 2,
        "title": "BMW 4 series",
        "type": "car"
    },
    {
        "id": 3,
        "title": "Triumph Scrambler",
        "type": "motorbike"
    },
    {
        "id": 4,
        "title": "Audi A3",
        "type": "car"
    }
];

var filtereddata = filterByProperty(data, "type", "car");

console.log(filtereddata);

Alternatively, you could use Array.filter instead:

const filterByProperty = (arr, prop, value) => arr.filter(o => o[prop] && o[prop] === value);

const data = [{
        "id": 1,
        "title": "Ford F-150",
        "type": "truck"
    },
    {
        "id": 2,
        "title": "BMW 4 series",
        "type": "car"
    },
    {
        "id": 3,
        "title": "Triumph Scrambler",
        "type": "motorbike"
    },
    {
        "id": 4,
        "title": "Audi A3",
        "type": "car"
    }
];

const filtered = filterByProperty(data, 'type', 'car');
console.log(filtered);

Zackary Jones · Accepted Answer · 2018-07-19 17:10:43Z

2

As an alternative to the other answers, I have changed your code slightly to work. Instead of moving through each key in the each 'vehicle' object it just checks for each vehicles prop equaling value in the first for loop.

Heres the code:

var data = [
        {
            "id": 1,
            "title": "Ford F-150",
            "type": "truck"
        },
        {
            "id": 2,
            "title": "BMW 4 series",
            "type": "car"
        },
        {
             "id": 3,
             "title": "Triumph Scrambler",
             "type": "motorbike"
        },
        {
            "id": 4,
            "title": "Audi A3",
            "type": "car"
        }
    ];    

    function filterByProperty(array, prop, value){
        var filtered = [];
        for(var i = 0; i < array.length; i++){
            var obj = array[i];
            if(obj[prop] == value)
                filtered.push(obj);
            else{
                console.log("not a " + value);
            }
        }    
        return filtered;
    }


    var filtereddata = filterByProperty(data, "type", "car");

    console.log(filtereddata);

hope this helps somebody!

edited Jul 19, 2018 at 17:10

answered Jul 19, 2018 at 16:52

Zackary Jones

3711 silver badge9 bronze badges

2 Comments

Stephen P Over a year ago

Put the code in your answer. Use a stack-snippet so it can be seen and run right here, instead of having to go to jsfiddle.

Zackary Jones Over a year ago

Roger that Stephen

Hari Das · Accepted Answer · 2018-07-19 17:31:02Z

1

You can use Array.filter to filter by property value

var data = [
      {
        "id": 1,
        "title": "Ford F-150",
        "type": "truck",
        "date": "2017-12-23"
      },
      {
        "id": 2,
        "title": "BMW 4 series",
        "type": "car",
        "date": "2017-12-22"
      },
      {
        "id": 3,
        "title": "Triumph Scrambler",
        "type": "motorbike",
        "date": "2017-12-21"
      },
      {
        "id": 4,
        "title": "Audi A3",
        "type": "car",
        "date": "2017-12-20"
      }
];
        
      function filterByProperty(array, prop, value){
          return newArray = array.filter(function (el) {
            return el[prop] == value;
          });
      }
      function compare(a,b) {
        if (new Date(a.date) < new Date(b.date))
          return -1;
        if (new Date(a.date) > new Date(b.date))
          return 1;
        return 0;
      }

      var filtereddata = filterByProperty(data, "type", "car");
      console.log(filtereddata.sort(compare));

edited Jul 19, 2018 at 17:31

answered Jul 19, 2018 at 16:48

Hari Das

11k8 gold badges69 silver badges67 bronze badges

6 Comments

Dev Over a year ago

Thank you worked perfectly. What if it had a date - sort by date too [ { "id": 2, "date": "20/12/2017" "title": "BMW 4 series", "type": "car" }, { "id": 4, "date": "20/11/2017" "title": "Audi A3", "type": "car" } ]

Hari Das Over a year ago

I didn't get you. Did you mean date in the property value ?

Dev Over a year ago

sorry i meant filter with date

Dev Over a year ago

So your filtering like within your example but with date sort too

Hari Das Over a year ago

Check my answer. It is now sorted by date after filter.

|

ManavM · Accepted Answer · 2018-07-19 16:48:27Z

1

Try using Array.filter(callback)

function filterByProperty(array, prop, value) {
    var filtered = array.filter(item => {
      item[prop] === value;
    }
    return filtered;
}

var filtereddata = filterByProperty(data, "type", "car");

console.log(filtereddata);

answered Jul 19, 2018 at 16:48

ManavM

3,1082 gold badges23 silver badges33 bronze badges

Comments

Diego Avila · Accepted Answer · 2018-07-19 16:51:53Z

1

you can use this function:

var data =[
        {
        "id": 1,
        "title": "Ford F-150",
        "type": "truck"
        },
        {
        "id": 2,
        "title": "BMW 4 series",
        "type": "car"
        },
        {
        "id": 3,
        "title": "Triumph Scrambler",
        "type": "motorbike"
        },
        {
        "id": 4,
        "title": "Audi A3",
        "type": "car"
        }
        ]
        
        filterByProperty(data, 'type', 'car');
        function filterByProperty(data, prop, value){
        	for(i=0; i<data.length; i++){
          	if(data[i][prop]==value){
            	console.log(data[i]);
            }
          }
        }

answered Jul 19, 2018 at 16:51

Diego Avila

7387 silver badges25 bronze badges

Comments

tstrand66 · Accepted Answer · 2018-07-19 16:59:58Z

As manavM said the internal array.filter class is made for this. The original array remains untouched. The second array filteredArr contains all of the items that returned a true to your return statement.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

https://www.w3schools.com/jsref/jsref_filter.asp

function filterByProperty(arr, prop, val) {
    const filteredArr = arr.filter(function (v) {
      return typeof v === 'object' && v[prop] == val;
    });
    console.log(arr);
    console.log(filteredArr);
};
filterByProperty([{
    "id": 1,
    "title": "Ford F-150",
    "type": "truck"
    },{
    "id": 2,
    "title": "BMW 4 series",
    "type": "car"
    },{
    "id": 3,
    "title": "Triumph Scrambler",
    "type": "motorbike"
    },{
    "id": 4,
    "title": "Audi A3",
    "type": "car"
    }], "type", "car");

Collectives™ on Stack Overflow

Javascript filter array result

8 Answers 8

1 Comment

Comments

Comments

2 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

2 Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related