简体   繁体   中英

Filtering through JSON sub-objects in JavaScript

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",
   }
  ]
}

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM