Filtering through JSON sub-objects in JavaScript

Question

I am trying to filter through the "carObj" below, as a user selects "filters" from a list on a page and display only the "matching" sub-objects.

Currently when a user selects a "filter" it is added to the "filterObj" and then I am rolling through the "carObj" with like 8 $.each statements to pull out all matching sub-objects. I am matching on the values and roll through many times to make it there.

For instance, assuming the example below, only the 3rd Sub-Object in the "carObj" would be "returned" with all of its values. As it stands I am setting an attribute to "TRUE" for all matches and "FALSE" for any that don't.

Then on the webpage I roll through all TRUE valued Sub-Objects in the "carObj" and display their information/Values in a table.

I am not sure any of this is the most efficient way to do it.

 /* Object filled as user selects "filters" */
 filterObj ={
    "Seats": {},
    "color": {
        "Orange": "Orange",
         "Red": "Red"
        },
    "Transmission": {
        "Manual": "Manual"
    },
    "Make": {
        "Ford": "Ford"
    },
    "Model": {},
    "Status": {
        "New": "New"
        }

}

/* Main object that contains all cars */
carObj = {
  "cars": [
   {
      "seats":"6",
      "color":"Red",
      "transmission":"Automatic",
      "make":"Ford",
      "model":"Windstar",
      "status":"New",
   },
   {
      "seats":"4",
      "color":"Black",
      "transmission":"Manual",
      "make":"Mazda",
      "model":"CRX",
      "status":"New",
   },
   {
      "seats":"2",
      "color":"Orange",
      "transmission":"Manual",
      "make":"Ford",
      "model":"Galaxy",
      "status":"New",
   }
  ]
}

DontVoteMeDown · Accepted Answer · 2014-02-06 14:34:19Z

3

That was a hard one. See this fiddle.

Considerations:

No use for objects in your filter object. I used simple arrays for that:
```
"color": {
    "Orange": "Orange",
    "Red": "Red"
},
```
to
```
"color": ["Orange", "Red"],
```
It will be more simple and logical;
I have altered the keys to be the first letter in upper case in all arrays and objects. Other way the algorithm would have to concern about it, and adjust it along its funcionalities. I fixed that to the script to become smaller, but if want it could work with nonstandard key names;
The function is returning any object from carObj that matches any of the filters, not all of them. But it can be made.

In short I'm not so sure if its working 100%. But its a try. If you find some error/bug let me now.

I hope it helps.

UPDATE:

I have updated the code to match all filters with at least one value in each. See this Fiddle.

So now if it haves Color with ["Orange"] the car have to match this color in order to be selected, and if Color has ["Orange", "Red"], then the car have to match Orange OR Red. Filters like Color: [] are ignored.

edited Feb 6, 2014 at 14:34

answered Feb 6, 2014 at 13:19

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

6 Comments

Robert Over a year ago

Thanks! That array makes much more sense. The filter Object just didn't feel right. I am running through the fiddle, its a bit complex for me but I am console logging as I go. It seems like it is pulling out on any match, not a match of "all". When I console log out "cars[n][f[i]]" and "cars[n][f[i]]" it shows a match on "red", "manual" and "orange". However the only true match is the orange car with a manual. I will keep playing with it but let me know if you come up with something.

DontVoteMeDown Over a year ago

@Robert yes is matching by any property. It should only match by all?

Robert Over a year ago

Yes, it only produces a "match" on all. Anything that has multiples, like "Orange" & "Red" as colors would be an 'OR' situation. Like, I don't know if you are familiar with MySQL but if it were a DB: [SELECT * from carObj WHERE (color = "orange" OR color = "red") AND transmission = "manual" AND status = "New"]. Not sure if that is more or less confusing...

DontVoteMeDown Over a year ago

@Robert I updated the Fiddle in order to fit a query like you described. Look at post update.

Robert Over a year ago

Appears to work most excellent, and is about 10x more concise than my original function. A nice lesson in my lack of understanding in Objects. I am going to compare the two fiddles and try to pull as much info from it as I can. Thank you for your effort.

|

Collectives™ on Stack Overflow

Filtering through JSON sub-objects in JavaScript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related