How can l only display objects by category from the json response?-CodePudding

I'm getting the following JSON response from a PHP backend, and l want to display in a slider using the category field for example first slider will contain only objects with the category "Basic Training" and another slider will have objects containing the category "Policy Training in angular 10, component.html, see the response and check the categories field.

{
"status": 0,
"course": [
{
"id": 16,
"name": "First Training",
"category": "Basic Training",
"description": "first training description",
"preview_image": "/preview/first.png",
"created_at": "2021-08-15 15:40:06"
},
{
"id": 17,
"name": "Second Training",
"category": "Basic Training",
"description": "second training description ",
"preview_image": "/preview/second.png",
"created_at": "2021-08-15 15:47:18"
},
{
"id": 19,
"name": "Security Policies",
"category": "Policy Training",
"description": "This course is about security",
"preview_image": "/preview/cyberprofile.jpeg",
"created_at": "2021-09-15 00:29:03"
},
{
"id": 20,
"name": "First Corrective",
"category": "Corrective Training",
"description": "This course is about training",
"preview_image": "/preview/kids-learning.jpeg",
"created_at": "2021-09-15 00:31:46"
}
],
"message": "courses retrieved successfully"
}

CodePudding user response：

You can group your element by category and display your result. If you like this method here is sample code.

let json_val = {
"status": 0,
"course": [
  {
    "id": 16,
    "name": "First Training",
    "category": "Basic Training",
    "description": "first training description",
    "preview_image": "/preview/first.png",
    "created_at": "2021-08-15 15:40:06"
  },
  {
    "id": 17,
    "name": "Second Training",
    "category": "Basic Training",
    "description": "second training description ",
    "preview_image": "/preview/second.png",
    "created_at": "2021-08-15 15:47:18"
  },
  {
    "id": 19,
    "name": "Security Policies",
    "category": "Policy Training",
    "description": "This course is about security",
    "preview_image": "/preview/cyberprofile.jpeg",
    "created_at": "2021-09-15 00:29:03"
  },
  {
    "id": 20,
    "name": "First Corrective",
    "category": "Corrective Training",
    "description": "This course is about training",
    "preview_image": "/preview/kids-learning.jpeg",
    "created_at": "2021-09-15 00:31:46"
  }
],
"message": "courses retrieved successfully"
}
var groupBy = (arr, key) => {
  var initialValue = {};
  return arr.reduce((acc, cval) => {
    var myAttribute = cval[key].toLowerCase().replace(" ", "_");
    acc[myAttribute] = [...(acc[myAttribute] || []), cval]
    return acc;
  }, initialValue);
};
var res = groupBy(json_val.course, "category");
console.log("group by:", res);

CodePudding user response：

You could just have a method that receives the category you want to filter for and returns the array of items corresponding to that category.

Example 1:

getCoursesByCategory(category: string) {
  return this.serverResponse.course.filter(c => c.category === category)
}

And use it like this.getCoursesByCategory('Basic Training')

CodePudding user response：

const data = { /* Your json */ };    
const categorizedData = data.course.reduce((r, a) => {
  r[a.category] = [...r[a.category] || [], a];
  return r;
}, {});
            
console.log(categorizedData);