Filter data using the ID in Javascript

Question

Filter data using the ID in Javascript

My data object contains information about different files, each associated with a courseContentId.

{id: 1864,
 courseContentId: 481,
 fileName: GymMembership.jpg
}
{id: 1865,
 courseContentId: 481,
 fileName: Field.jpg
}
{id: 1866,
 courseContentId: 482,
 fileName: Track.jpg
}

I want to display these files separately based on their courseContentId by creating a new object. Here is my desired output:

{id: 1864,
 courseContentId: 481,
 fileName: GymMembership.jpg
}
{id: 1865,
 courseContentId: 481,
 fileName: Field.jpg
}

{id: 1866,
 courseContentId: 482,
 fileName: Track.jpg
}

Which type of JavaScript function would be best suited for achieving this?

javascript arrays angularjs json object

Answer 1

Answer №1

If you want to simplify your code, consider using _.GroupBy function instead of multiple filters.

items = [{id: 1864,
 itemTypeId: 481,
 itemName: 'Item1'
 },
 {id: 1865,
 itemTypeId: 481,
 itemName: 'Item2'
 },
 {id: 1866,
 itemTypeId: 482,
 itemName: 'Item3'
 }]
 
var groupedItems = _.groupBy(items, function(item) {
  return item.itemTypeId;
});
console.log("Grouped Items")
console.log(groupedItems);
console.log("Filter by 481")
console.log(groupedItems["481"]);
console.log("Filter by 482")
console.log(groupedItems["482"]);

<script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>

Answer 2

If you want to simplify your code, consider using _.GroupBy function instead of multiple filters.

items = [{id: 1864,
 itemTypeId: 481,
 itemName: 'Item1'
 },
 {id: 1865,
 itemTypeId: 481,
 itemName: 'Item2'
 },
 {id: 1866,
 itemTypeId: 482,
 itemName: 'Item3'
 }]
 
var groupedItems = _.groupBy(items, function(item) {
  return item.itemTypeId;
});
console.log("Grouped Items")
console.log(groupedItems);
console.log("Filter by 481")
console.log(groupedItems["481"]);
console.log("Filter by 482")
console.log(groupedItems["482"]);

<script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>

Answer 3

Answer №2

const desiredId = 481;
const filteredResult = contentArray.filter(item => item.id === desiredId);

Answer 4

const desiredId = 481;
const filteredResult = contentArray.filter(item => item.id === desiredId);

Answer 5

Answer №3

It's a bit tricky to find an easy solution for this problem, but you can give this a shot:

var test = [{
    id: 1864,
    courseContentId: 481,
    fileName: 'GymMembership.jpg'
  },
  {
    id: 1865,
    courseContentId: 481,
    fileName: 'Field.jpg'
  },
  {
    id: 1866,
    courseContentId: 482,
    fileName: 'Track.jpg'
  }
];

console.log(filter(test, 'courseContentId', 481));

function filter(arr, key, value) {
  return arr.reduce((data, item) => {
    if (item[key] == value) data.push(item);
    return data;
  }, []);
}

Answer 6

It's a bit tricky to find an easy solution for this problem, but you can give this a shot:

var test = [{
    id: 1864,
    courseContentId: 481,
    fileName: 'GymMembership.jpg'
  },
  {
    id: 1865,
    courseContentId: 481,
    fileName: 'Field.jpg'
  },
  {
    id: 1866,
    courseContentId: 482,
    fileName: 'Track.jpg'
  }
];

console.log(filter(test, 'courseContentId', 481));

function filter(arr, key, value) {
  return arr.reduce((data, item) => {
    if (item[key] == value) data.push(item);
    return data;
  }, []);
}

Filter data using the ID in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

A guide on adding up all the values in a table's columns with JavaScript

The deployment of the Twilio React plugin encountered an issue: Error message stating that the specified resource '/Configuration' could

Scrolling a div automatically without affecting its parent element

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

Utilizing ASCII art in React: A guide to incorporating textual designs into your

Create a new object in Three.js every x seconds and continuously move each object forward in the Z-axis direction

Instructions for modifying the color of the close button in the angularjs ui-select module

Searching for multiple lines of text within a PHP document

Jquery ajax is failing to achieve success, but it is important not to trigger an error

Save your AngularJS SVG file as a JPG

Optimize Google Places Autocomplete: Customize the way search results are shown after selection (display only street name and number)

Electron fails to display images in the compiled version

A guide to extracting the selected options from a multiple select box and presenting them in a text box

Multiple uses of p-fileUpload in primeng are not functioning as expected

Is there a way to organize an array of elements into three columns using PHP?

Looking for a way to choose a button with a specific class name and a distinct "name" attribute using jquery?

What is the process for serializing an array?

What is the best way to generate an @ symbol using JavaScript?

Guide to incorporating tesseract OCR into a Cordova/Phonegap application

AngularJS routing with html5mode causing 404 error when using htaccess