jQuery $.grep returning empty JSON

Question

I am trying to get certain classes based off their id from the database on the server side. The data sent from the server is in JSON format. The following is the JSON I am currently working with:

var classes = {
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "mechanics",
      "created_at": "2016-08-08T15:37:14"
    },
    {
      "id": 2,
      "name": "mechanics",
      "created_at": "2011-10-02T23:25:42"
    },
    {
      "id": 4,
      "name": "Stephen's Rad New Course",
      "created_at": "2016-09-07T15:44:50"
    },
    {
      "id": 5,
      "name": "English",
      "created_at": "2016-10-28T07:09:45"
    },
    {
      "id": 6,
      "name": "Mathematics",
      "created_at": "2017-02-15T13:33:49"
    }
  ]
}

The id that I am using is taken from another JSON:

var student = {
  "success": true,
  "data": {
    "privileges": [
      {
        "type": "mac"
      },
      {
        "type": "scones"
      }
    ],
    "fname": "Luke",
    "loaned": [],
    "classes": [
      {
        "name": "Stephen's Rad New Course",
        "id": 4,
        "created_at": "2016-09-07T15:44:50"
      },
      {
        "name": "Mathematics",
        "id": 6,
        "created_at": "2017-02-15T13:33:49"
      }
    ],
    "type": "student",
    "created_at": "2016-08-24T09:35:26",
    "lname": "Skywalker",
    "id": 44,
    "email": "skywalker.ftw@cedarhouse.co.za"
  }
}

Here is the code I am using to filter the data:

for (var j = 0; j < student.data.classes.length; j++) {
    var class_id = student.data.classes[j].id;
    classes = $.grep(classes, function(n, i) {
        return n.id == class_id;
    });
}
console.log(JSON.stringify(classes));

Based off the classes that that goes with the student JSON data, only those two classes with IDs of 4 and 6 should be displayed but right now nothing is being displayed.

[What is the difference between JSON and Object Literal Notation?](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) — Andreas, Feb 18 '17 at 10:20

score 2 · Accepted Answer · answered Feb 18 '17 at 09:59

You are passing a non-array classes to $.grep (you probably intended classes.data), and you are overwriting the previous assignment to classes by the next in every iteration of the loop.

Instead, gather the id values in an array, and then filter for those ids that are in that array with Array#indexOf (or Array#includes in modern browsers):

var class_ids = student.data.classes.map(function (cls) {
    return cls.id;
});

classes.data = classes.data.filter(function(n) {
    return class_ids.indexOf(n.id) > -1;
});
console.log(classes);

var classes = {
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "mechanics",
      "created_at": "2016-08-08T15:37:14"
    },
    {
      "id": 2,
      "name": "mechanics",
      "created_at": "2011-10-02T23:25:42"
    },
    {
      "id": 4,
      "name": "Stephen's Rad New Course",
      "created_at": "2016-09-07T15:44:50"
    },
    {
      "id": 5,
      "name": "English",
      "created_at": "2016-10-28T07:09:45"
    },
    {
      "id": 6,
      "name": "Mathematics",
      "created_at": "2017-02-15T13:33:49"
    }
  ]
}

var student = {
  "success": true,
  "data": {
    "privileges": [
      {
        "type": "mac"
      },
      {
        "type": "scones"
      }
    ],
    "fname": "Luke",
    "loaned": [],
    "classes": [
      {
        "name": "Stephen's Rad New Course",
        "id": 4,
        "created_at": "2016-09-07T15:44:50"
      },
      {
        "name": "Mathematics",
        "id": 6,
        "created_at": "2017-02-15T13:33:49"
      }
    ],
    "type": "student",
    "created_at": "2016-08-24T09:35:26",
    "lname": "Skywalker",
    "id": 44,
    "email": "skywalker.ftw@cedarhouse.co.za"
  }
}

var class_ids = student.data.classes.map(function (cls) {
    return cls.id;
});

classes.data = classes.data.filter(function(n) {
    return class_ids.indexOf(n.id) > -1;
});
console.log(classes);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Unless you are working with very outdated browsers, there is no need to use jQuery for this.

Oh wow! I like how clean that code looks compared to my mess haha. How would I approach the opposite of what I am doing though? By opposite, I mean to find classes that isn't the ID of 4 and 6. I used `grep` here and it works. — Liang-Shih Lin, Feb 18 '17 at 10:17

jQuery $.grep returning empty JSON

1 Answers1