Nested JSON, remove object based on a condition in Jquery using angularjs

Question

I have a JSON object in this variable $scope.bbTreeData. I am trying to remove the object where flag is false. I am able to traverse through the nested JSON object but I am not sure how to remove the object ? any suggestion ?

[{
  "market": "Atl",
  "subItem": [{
    "comment_id": "1",
    "user_id": "32509",
    "flag": true
  }, {
    "comment_id": "2",
    "user_id": "32510",
    "flag": false

  }]
}, {
  "market": "Chicago",
  "subItem": [{
    "comment_id": "3",
    "user_id": "32501",
    "flag": true
  }, {
    "comment_id": "4",
    "user_id": "32502",
    "flag": false

  }]
}]

$scope.bbTreeInactiveData = angular.copy($scope.bbTreeData);
angular.forEach($scope.bbTreeInactiveData, function(item) {
  angular.forEach(item.subItem, function(record, index) {
    if (record.flag == false) {
      console.log(item.subItem, index);
      /* code to remove the object*/
    }
  });
});

Use Array.filter instead of Array.forEach. Or alternatively, splice the record out of the array manually with Array.splice — Shilly, Aug 24 '16 at 15:26

Raman Sahasi · Accepted Answer · 2016-08-24T15:43:05.470

You can use _without() function of _underscorejs

see the documentation

without
_.without(array, values)

Returns a copy of the array with all instances of the values removed.

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
=> [2, 3, 4]

Input

[
    {
        "market": "Atl",
        "subItem": [
            {
                "comment_id": "1",
                "user_id": "32509",
                "flag": true
            },
            {
                "comment_id": "2",
                "user_id": "32510",
                "flag": false
            }
        ]
    },
    {
        "market": "Chicago",
        "subItem": [
            {
                "comment_id": "3",
                "user_id": "32501",
                "flag": true
            },
            {
                "comment_id": "4",
                "user_id": "32502",
                "flag": false
            }
        ]
    }
]

Output

[
    {
        "market": "Atl",
        "subItem": [
            {
                "comment_id": "1",
                "user_id": "32509",
                "flag": true
            }
        ]
    },
    {
        "market": "Chicago",
        "subItem": [
            {
                "comment_id": "3",
                "user_id": "32501",
                "flag": true
            }
        ]
    }
]

Code Snippet

var json = JSON.parse('[{"market":"Atl","subItem":[{"comment_id":"1","user_id":"32509","flag":true},{"comment_id":"2","user_id":"32510","flag":false}]},{"market":"Chicago","subItem":[{"comment_id":"3","user_id":"32501","flag":true},{"comment_id":"4","user_id":"32502","flag":false}]}]');

for(var i=0; i<json.length; i++) {
    json[i].subItem = _.without(json[i].subItem, _.findWhere(json[i].subItem, {flag: false}));
};

console.log(JSON.stringify(json, 0, 8));

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

var json = JSON.parse('[{"market":"Atl","subItem":[{"comment_id":"1","user_id":"32509","flag":false},{"comment_id":"2","user_id":"32510","flag":false}]},{"market":"Chicago","subItem":[{"comment_id":"3","user_id":"32501","flag":true},{"comment_id":"4","user_id":"32502","flag":false}]}]'); — user1005310, Aug 24 '16 at 16:06
If I change the JSON, I am not getting the desired result. I changed all the subitem , flag to false — user1005310, Aug 24 '16 at 16:07
@user1005310 this line is just to include test data. You can omit this line and continue with your Object as it is — Raman Sahasi, Aug 24 '16 at 16:08
@user1005310 just use 3 lines of for loop and replace `json` with your object. Don't forget to include `underscore-min.js` in `` tags. — Raman Sahasi, Aug 24 '16 at 16:10

Mohan Dere · Answer 2 · 2016-08-24T15:46:06.203

1

Try this:

$scope.bbTreeInactiveData = angular.copy($scope.bbTreeData);

var results = $scope.bbTreeInactiveData.map(function(row) {
  return row.subItem.filter(function(cell) {
    return cell.flag == true
  });
});

Use map() and filter() function.

edited Aug 24 '16 at 15:46

answered Aug 24 '16 at 15:40

Mohan Dere

4,497
1
25
21

If you need original data for further processing, it will be safe to make a copy. – Mohan Dere Aug 24 '16 at 16:08

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

You can use the delete keyword in plain JavaScript:

delete item.subItem[index]

Which I believe there is already an answer for: How do I remove a property from a JavaScript object?

If you want to delete the root, add an index parameter to your first forEach, then delete the root with array splice function:

$scope.bbTreeInactiveData.splice(indexRoot,1);

edited May 23 '17 at 12:24

Community

1
1

answered Aug 24 '16 at 15:27

Pop-A-Stash

6,572
5
28
54

This removes the subitem but for scenario where all the subitems are removed the root element still remains . How do I remove the root level element ? for example remove market Atl where all the subitems flag is set as false – user1005310 Aug 24 '16 at 15:32
Just as easy: `delete item[indexRoot]`. You'll need to add the index for your first `forEach`. You'll want to name it differently, too – Pop-A-Stash Aug 24 '16 at 15:36
Actually, since the root element is an array, my second answer would give you and array with `undefined` for each deleted element, instead of what you are looking for – Pop-A-Stash Aug 24 '16 at 15:44

Nested JSON, remove object based on a condition in Jquery using angularjs

3 Answers3