Deep filter for values in JSON data

Question

I have some JSON data that I am trying to filter based on the checkbox selection of a user in javascript but I have run into a wall as to the multi-level filtering. I have two dimensions of data that need to be filtered from the JSON; first filter the JSON data based on the OS selection, then to filter that resulting OS selection data with a questions selected filter. For example, I am doing the following:

$('.os-checkbox input[type="checkbox"]:checked').each(function() {
    OSSelected.push(Number($(this).parents('.checkbox').index()));
});

$('.question-checkbox input[type="checkbox"]:checked').each(function() {
    QuestionSelected.push(Number($(this).parents('.checkbox').index()));
});

var array = $scope.data.responses;
var osSelectionFilter = array.filter(function(elem, index) {
    return (JSON.stringify(elem.OSSelectedIndex) == JSON.stringify(OSSelected));
});

console.log(osSelectionFilter); // should return all 'data.response.OSSelectedIndex' objects with the selection made, ex. 0-PC so any selection with "OSSelectedIndex": [0] included

var questionSelectionFilter = osSelectionFilter.filter(function(elem, index) {
    return (JSON.stringify(elem.questionSelectedIndex) == JSON.stringify(QuestionSelected));
});

console.log(questionSelectionFilter); // should filter the osSelectionFilter above and return all objects with the questions array included, ex. 0, 1, 2...

Once a selection is filtered the "result" data in the JSON will populate a div. Issue is now that the filter is trying to filter the whole array I am guessing, e.g. looking for [0, 1] instead of each value in the array individually; where value [0] and [1] are two different separate selections.

JSON data coming from the CMS looks like this:

{
    "id": "test1",
    "fields": {
        "OS": [
            "PC",
            "Mac",
            "Android",
            "iOS"
        ],
        "questions": [{
            "question": "Question 0"
        }, {
            "question": "Question 1"
        }, {
            "question": "Question 2"
        }, {
            "question": "Question 3"
        }, {
            "question": "Question 4"
        }, {
            "question": "Question 5"
        }, {
            "question": "Question 6"
        }],
        "responses": [{
            "ID": 1,
            "OSSelectedIndex": [ 0 ],
            "questionSelectedIndex": [],
            "result": "<h1>Response 1 found</h1>"
        }, {
            "ID": 2,
            "OSSelectedIndex": [ 0, 1 ],
            "questionSelectedIndex": [ 0, 1, 2 ],
            "result": "<h1>Response 2 found</h1>"
        }, {
            "ID": 3,
            "OSSelectedIndex": [ 0, 2 ],
            "questionSelectedIndex": [ 0, 1, 2, 5 ],
            "result": "<h1>Response 3 found</h1>"
        }, {
            "ID": 4,
            "OSSelectedIndex": [ 1, 2 ],
            "questionSelectedIndex": [ 1, 2, 3, 4 ],
            "result": "<h1>Response 4 found</h1>"
        }]
    }
}

Is such a setup possible?

Plunker with the code above:

https://plnkr.co/edit/N1NJKDOgvVkB9gPmPooi?p=preview

Thanks so much

This is simply not how to work with angular. Get rid of all that jQuery. You are making this far more complicated than it needs to be. Strongly suggest reading : [Thinking in angular if I have a jQuery background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, Jun 30 '16 at 12:28
Your question seems to bee unclear.. can you mention the expected output? — Tirthraj Barot, Jun 30 '16 at 12:28
@charlietfl, you're right, currently working on that. Initially the whole thing was jQuery but converting the function to angular is a requirement. — pdrilch, Jun 30 '16 at 12:54
Hello @TirthrajBarot, thanks so much for your reply and sorry for the confusion, Basically, the user will make selections for OS and then a set of questions that need to be filtered through the JSON (for example if a user selects PC and Mac as the OS, then the data should filter for any response with that selection included, then that filter will be filtered once more with the questions that the user selected, resulting in a result in the JSON with some HTML. — pdrilch, Jun 30 '16 at 12:56
And how much of it is working well and how much is the problem ? @pdrilch — Tirthraj Barot, Jun 30 '16 at 12:58
The data for this response will be coming from the "responses" object in the JSON, based on a match from the users selection, e.g. user selects PC ([0] selection, then it will filter ID 1, 2 and 3 in the JSON, then if the user selects question 0, and 1 ([0, 1]) the end result will be ID 2 as a result. — pdrilch, Jun 30 '16 at 12:59
@charlietfl, that will be my next question in StackOverflow :D (going over the documentation right now on how to get the index of the selected checkboxes, once I get stuck will post it as a question). — pdrilch, Jun 30 '16 at 13:12
@TirthrajBarot Barot, I was able to select the first dimention of results (for example if I selected PC the 'osSelectionFilter' would spit out the correct objects in the JSON with this selection included, the issue was on the second filter for the questions. — pdrilch, Jun 30 '16 at 13:16

score 1 · Accepted Answer · answered Jun 30 '16 at 12:32

1

Try to change your filters to this:

var osSelectionFilter = array.filter(function(elem, index) {
  for(var i = 0; i < elem.OSSelectedIndex.length; i++) {
    if(OSSelected.indexOf(elem.OSSelectedIndex[i]) >= 0) {
      return true;
    }
  }
  return false;
});

...

var questionSelectionFilter = osSelectionFilter.filter(function(elem, index) {
  for(var i = 0; i < elem.questionSelectedIndex.length; i++) {
    if(QuestionSelected.indexOf(elem.questionSelectedIndex[i]) >= 0) {
      return true;
    }
  }
  return false;
});

Updated plnkr

answered Jun 30 '16 at 12:32

Arg0n

8,283
2
21
38

Thanks so much for your reply, this actually works :D and see that I need to add another dimension to the JSON when multiple likely results are found (such as a "weight mechanism" to mark certain results as higher priority). Can't upvote or accept your answer as I do not have enough points but will do so once I do. Thanks so much. – pdrilch Jun 30 '16 at 13:14
@pdrilch You can allways accept answer? Even when you have low rep. – Arg0n Jun 30 '16 at 14:51

Deep filter for values in JSON data

1 Answers1