Main menu

Pages

Edit post

Work with arrays and objects in JavaScript with collect.js

Ossamah Kabbani
(0)

Simplify working with arrays and objects with collect.js in JavaScript by providing many methods

Simplify working with arrays and objects with collect.js in JavaScript by providing many methods




Brief

Have you ever used Laravel Collections  to deal with arrays arrays? If you know how wonderful and  simple it is to deal with arrays, as collect.js is a conversion of the same tools and methods for JavaScript developers to simplify dealing with arrays and Objects distinguished in collect.js that it does not depend on any other libraries to operate Dependency Free In this article, we will explain the installation method and how to use some methods of Methods to deal with arrays or objects and put the links for the rest of the Methods methods on the collect.js page on the GitHub site to see the rest of the examples

Installation

You can install collect.js using one of these methods, select the one appropriate for you and your project.

1- You can install collect.js using NPM 

npm install collect.js --save

2- Using Yarn

yarn add collect.js

3- Using the CDN link 

  • Visit this collect.js CDN page 
  • Select the version and CDN provider, then copy the appropriate link for you, either the regular version or the compressed version 
  • Add the link inside the tag  <script>inside your HTML code 

Example of html code using CDN link 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collect.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/collect.js/4.0.13/collect.js"></script>
</head>
<body>

    
</body>
</html>

4- Download the collect.js file from the GitHub page

  • Visit this collect.js Build page 
  • Download the right file for you, either the full version or the zip 
  • Add the file to your project folders and add the link to the file inside a tag  <script>inside your HTML code 

An example of the HTML code with a direct link to the file ( note: you must copy the collect.js file into a folder named js with the same name for the example to work for you)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collect.js</title>
    <script src="/js/collect.js"></script>
</head>
<body>

    
</body>
</html>

the use 

We will give examples of some of the Methods provided by collect.js to deal with arrays and objects in JavaScript. In our examples we will use the collect function to create an object from the collection class. This will give you many methods of Methods to deal with the entered data, whether it is an Array array or an Object

1- all

The all function returns all Collection items as an array

Example:

collect([1, 2, 3]).all();

//=> [1, 2, 3]

2- average

This is another name for avg and it has the same function

3- avg

Avg function returns the average of all Collection items 

Example:

collect([1, 3, 3, 7]).avg();

//=> 3.5

If you have a nested arrays or an object, you must specify the key on which to perform the average calculation.

Example:

const collection = collect([{
  name: 'JavaScript: The Good Parts', pages: 176
}, {
  name: 'JavaScript: The Definitive Guide', pages: 1096
}]);

collection.avg('pages');

//=> 636

4- chunk

The chunk function splits the Collection into several smaller Collections based on the size entered

Example:

const collection = collect([1, 2, 3, 4, 5, 6, 7]);

const chunks = collection.chunk(4);

chunks.all();

//=> [[1, 2, 3, 4], [5, 6, 7]]

5- collapse

Collapse function Convert all entered arrays to a single-level collection

Example:

const collection = collect([[1, 2, 3], [4, 5, 6], [7, 8, 9]]);

const collapsed = collection.collapse();

collapsed.all();

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

6- combine

Combine is to combine two sets so that it uses the first Collection as keys and the second Collection as its values

Example:

const collection = collect(['name', 'number']);

const combine = collection.combine(['Steven Gerrard', 8]);

combine.all();

//=> {
//=>   name: 'Steven Gerrard',
//=>   number: 8
//=> }

7- concat

The concat function is to combine more than one array, object, or collection

Example:

const collection = collect([1, 2, 3]);

collection
  .concat(['a', 'b', 'c'])
  .concat({
    name: 'Steven Gerrard',
    number: 8
  });

collection.all();

//=> [1, 2, 3, 'a', 'b', 'c', 'Steven Gerrard', 8]

8- contains

The contains function is to check if Collection contains a specific item

Example:

const collection = collect({
  name: 'Steven Gerrard',
  number: 8
});

collection.contains('name');
//=> true

collection.contains('age');
//=> false

Another example of a matrix:

const collection = collect([1, 2, 3]);

collection.contains(3);
//=> true

9- diff

The diff function is the comparison between two arrays or two Collections An example when comparing Collection A with Collection B will return to us the Collection A items that are not in Collection B

Example:

const collection = collect([1, 2, 3, 4, 5]);

const diff = collection.diff([1, 2, 3, 9]);

diff.all();

//=> [4, 5]

10- each

Each pass to all Collection items and pass each item in the collection on the Callback

Example:

let sum = 0;

const collection = collect([1, 3, 3, 7]);

collection.each((item) => {
  sum += item;
});

//=> console.log(sum);
//=> 14

11- every

Every's job is to check all Collection items they skip a conditional check you specify

Example:

collect([1, 2, 3, 4]).every((value, key) => value > 2);

//=> false

12- except

The except function is to return all elements of the collection except for some of the Keys that it specifies to be ignored

Example:

const collection = collect({
  product_id: 1,
  price: 100,
  discount: false,
});

const filtered = collection.except(['price', 'discount']);

filtered.all();

//=> { product_id: 1 }

Last example:

collect([1, 2, 3, 4]).except([2, 12]).all();

//=> [1, 3, 4]

The opposite of the except function you can use only, as it will return the elements of the collection whose keys you specify

13- filter

The filter function is to pass all the collection items, pass all the items on the Callback, and keep only those that bypass the verification requirement and delete the rest.

Example:

const collection = collect([1, 2, 3, 4]);

const filtered = collection.filter((value, key) => value > 2);

filtered.all();

//=> [3, 4]

When Callback is unchecked, any item equal to false will be deleted

Example:

const collection = collect([0, 1, 2, null, 3, 4, undefined, 5, 6, 7, [], 8, 9, {}, 10]);

const filtered = collection.filter();

filtered.all();

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Inverting the filter function, you can use reject as you will specify a validation condition to delete the elements and keep the rest of the elements

14- first

The first job is to get the first item in the group that overrides the Callback verification condition

Example:

collect([1, 2, 3, 4]).first(item => item > 1);

//=> 2

You can get the first item in the group without specifying a Callback 

Example:

collect([1, 2, 3, 4]).first();

//=> 1

15- firstWhere

The firstWhere function searches inside the Collection and returns the first item in the collection with a key and value that you specify for the search operation

Example:

const collection = collect([
    {name: 'Regena', age: 12},
    {name: 'Linda', age: 14},
    {name: 'Diego', age: 23},
    {name: 'Linda', age: 84},
]);

collection.firstWhere('name', 'Linda');

//=> { name: 'Linda', age: 14 }

Conclusion

Here is a list of all Methods in collect.js on GitHub site. There is an explanation and example for each Method




read also : 

reactions

Latest articles from : Programming

Comments

Post a Comment