{"id":13506827,"url":"https://github.com/teles/array-mixer","last_synced_at":"2025-06-27T21:33:37.460Z","repository":{"id":50713608,"uuid":"102418366","full_name":"teles/array-mixer","owner":"teles","description":"Powerful, super tiny and easy to use lib to reorder your javascript arrays.","archived":false,"fork":false,"pushed_at":"2024-06-01T18:40:30.000Z","size":789,"stargazers_count":40,"open_issues_count":1,"forks_count":78,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-06-23T22:47:51.146Z","etag":null,"topics":["array","babel","es2015","es6","functional","functional-programming","hacktoberfest","javascript","node"],"latest_commit_sha":null,"homepage":"https://teles.dev.br/array-mixer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-05T01:25:25.000Z","updated_at":"2025-05-31T07:26:12.000Z","dependencies_parsed_at":"2025-02-26T03:16:51.255Z","dependency_job_id":"832b0466-bdab-4d85-9a12-7ca4732947f1","html_url":"https://github.com/teles/array-mixer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/teles/array-mixer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Farray-mixer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Farray-mixer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Farray-mixer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Farray-mixer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teles","download_url":"https://codeload.github.com/teles/array-mixer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teles%2Farray-mixer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262334975,"owners_count":23295530,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["array","babel","es2015","es6","functional","functional-programming","hacktoberfest","javascript","node"],"created_at":"2024-08-01T01:00:58.451Z","updated_at":"2025-06-27T21:33:37.274Z","avatar_url":"https://github.com/teles.png","language":"JavaScript","funding_links":[],"categories":["Project Logo","Examples"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cbr\u003e\n   \u003cimg src=\"./.readme/images/logo.png\" alt=\"Logo ArrayMixer\" title=\"Logo ArrayMixer by  cliparteles ( https://openclipart.org/user-detail/cliparteles )\" /\u003e\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e  \n\u003ca href=\"https://www.codacy.com/app/josetelesmaciel/array-mixer?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=teles/array-mixer\u0026utm_campaign=badger\"\u003e\u003cimg src=\"https://api.codacy.com/project/badge/Grade/2cbd62dd3c284ce79f6e2c35817bec12\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.codacy.com/app/josetelesmaciel/array-mixer?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=teles/array-mixer\u0026utm_campaign=Badge_Coverage\"\u003e\u003cimg src=\"https://api.codacy.com/project/badge/Coverage/8a941e0f57c047c8a481f4854666b42d\"\u003e\u003c/a\u003e\n\u003ca href=\"https://travis-ci.org/teles/array-mixer\"\u003e\u003cimg src=\"https://travis-ci.org/teles/array-mixer.svg?branch=master\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/array-mixer\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/array-mixer.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://gitter.im/array-mixer/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge\"\u003e\u003cimg src=\"https://badges.gitter.im/array-mixer/Lobby.svg\"\u003e\u003c/a\u003e\n \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  This repository contains the \u003cstrong\u003eArrayMixer\u003c/strong\u003e source code.\n  ArrayMixer is a tiny javascript lib with \u003cstrong\u003eless than 1kb\u003c/strong\u003e made to help ordering groups of arrays in a very personalized manner.\nPowerful and easy to use.\n\u003c/p\u003e\n\n## Table of contents\n\n  * [Common usage](#common-usage)\n  * [Installation](#installation)\n     * [Node projects](#node-projects)\n     * [Web projects](#web-projects)\n  * [Parameters](#parameters)\n     * [Aliases](#aliases)\n     * [Sequence](#sequence)\n  * [Examples](#examples)\n     * [Example 1) For every 7 photos display an ad:](#example-1-for-every-7-photos-display-an-ad)\n     * [Example 2) For every 4 paragraphs of text include 2 images:](#example-2-for-every-4-paragraphs-of-text-include-2-images)\n     * [Example 3) In a group of 8 related links reserve positions 5 and 6 for sponsored links:](#example-3-in-a-group-of-8-related-links-reserve-positions-5-and-6-for-sponsored-links)\n     * [Example 4) Display a list of songs including the most successful songs for every 10 songs:](#example-4-display-a-list-of-songs-including-the-most-successful-songs-for-every-10-songs)\n     * [Example 5) You can also use larger aliases and the ES6 object shorthand:](#example-5-you-can-also-use-larger-aliases-and-the-es6-object-shorthand)\n     * [Example 6) View photos of puppies, kittens and penguins in sequence:](#example-6-view-photos-of-puppies-kittens-and-penguins-in-sequence)\n     * [Example 7) Include 1 large photo for every 2 medium size photos followed by 3 small photos:](#example-7-include-1-large-photo-for-every-2-medium-size-photos-followed-by-3-small-photos)\n     * [More examples](#more-examples)\n  * [Contributing](#contributing)\n  * [License](#license)\n  * [Special thanks](#special-thanks)\n\n## Common usage\n\nLet's think we have two arrays:  **photos** and **ads**.\n\n```javascript\nphotos.length === 12; // true\nads.length === 6; // true\n```\n\nUse `ArrayMixer` to create a new array containing **2 photos** followed by **1 ad** until the end of both arrays.\n\n\n```javascript\nlet mixedArray = ArrayMixer({P:photos, A:ads}, [\"2P\", \"1A\"]);\n```\n\nSo `mixedArray` will contain:\n\u003cdiv\u003e\n  \u003cimg src=\"./.readme/images/p0.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p1.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/a0.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p2.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p3.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/a1.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p4.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p5.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/a2.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p6.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p7.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/a3.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p8.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p9.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/a4.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p10.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/p11.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/a5.svg\" align=\"auto\"\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"installation\"\u003eInstallation\u003c/h2\u003e\n\n`ArrayMixer` can be used in node projects and web projects.\n\n### Node projects\n\nRequires node version **5.7 or later**.\n\n```bash\nnpm install array-mixer --save\n```\n\nImport it to your code using:\n\n```javascript\nconst ArrayMixer = require(\"array-mixer\");\n```\n\n### Web projects\n\n[Download latest ES5 transpiled version from unpkg.com](https://unpkg.com/array-mixer@0.7.2/release/array-mixer.js).\n\nImport *ES5* transpiled version to your code.\n\n```html\n\u003cscript src=\"https://unpkg.com/array-mixer@0.7.2/release/array-mixer.js\"\u003e\u003c/script\u003e\n```\n\n## Parameters\n\n\u003cimg src=\"./.readme/images/aliases.svg\" align=\"left\"\u003e\n\u003cimg src=\"./.readme/images/sequence.svg\"\u003e\n\n`ArrayMixer` has only two mandatory parameters.\n\n```javascript\nlet aliases = {M:myArray, O:otherArray};\nlet sequence = [\"3M\", \"5O\"];\n\nlet mixed = ArrayMixer(aliases, sequence);\n```\n\n\n### Aliases\n\nThis parameter **should be** an object with keys used as alias for sequence and key values pointing to avaliable arrays.\n\n\n### Sequence\n\nThis parameters uses the aliases defined on **aliases** parameter to create a sequence order to display the arrays.\n\n## Examples\n\n`ArrayMixer` can be used combining different arrays, aliases and sequences.\nThe following examples shows some ways to use it.\n\n### Example 1) For every 7 photos display an ad:\n\n```javascript\nArrayMixer({F: Photos, A: Ads}, [\"7P\", \"1A\"]);\n```\n**or** (as number 1 on sequence can be ommited):\n\n```javascript\nArrayMixer({F: Photos, A: Ads}, [\"7P\", \"A\"]);\n```\n\n### Example 2) For every 4 paragraphs of text include 2 images:\n```javascript\nArrayMixer({P: paragraphs, I: images}, [\"4P\", \"2I\"]);\n```\n\n### Example 3) In a group of 8 related links reserve positions 5 and 6 for sponsored links:\n```javascript\nArrayMixer({R: related, S: sponsored}, [\"4R\", \"2S\", \"2R\"]);\n```\n\n### Example 4) Display a list of songs including the most successful songs for every 10 songs:\n```javascript\nArrayMixer({M: musics, H: hits}, [\"10M\", \"2H\"]);\n```\n\n### Example 5) You can also use larger aliases and the ES6 object shorthand:\n```javascript\nArrayMixer({days, weekend}, [\"5days\", \"2weekend\"]);\n```\n\nYou can manipulate more than two vectors at a time, as in the following example:\n \n### Example 6) View photos of puppies, kittens and penguins in sequence:\n\n```javascript\nlet mixed = ArrayMixer({puppies, kittens, penguins}, [\"puppies\", \"kittens\", \"penguins\"));\n```\n\n| `puppies`               | `kittens`               | `penguins`                          | `mixed` |\n|-----------------------|-----------------------|-----------------------------------|------------------------------------------------------------------------------|\n| [🐶, 🐶, 🐶] | [🐱, 🐱, 🐱] | [🐧, 🐧, 🐧] | [🐶, 🐱, 🐧, 🐶, 🐱, 🐧, 🐶, 🐱, 🐧] |\n\n### Example 7) Include 1 large photo for every 2 medium size photos followed by 3 small photos:\n\n**Tip:** `ArrayMixer` lets you mix three or more arrays at once.\n\n```javascript \nArrayMixer({L:large, M:medium, S:small}, [\"2M\", \"3S\", \"L\"]);\n```\n\u003cdiv\u003e\n  \u003cimg src=\"./.readme/images/m0.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/m1.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s0.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s1.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s2.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/l0.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/m2.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/m3.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s3.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s4.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s5.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/l1.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/m4.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/m4.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s6.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s7.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/s8.svg\" align=\"left\"\u003e\n  \u003cimg src=\"./.readme/images/l2.svg\"\u003e\n\u003c/div\u003e\n\n\u003e **Disclaimer**: All arrays mentioned in this section must exist for the examples to work.\n\n### More examples\n\nFor more example please check the [specification file](src/spec.js).\n\n## Contributing\n\nYou may contribute in several ways like creating new features, fixing bugs, improving documentation and examples\nor translating any document here to your language. [Find more information in CONTRIBUTING.md](CONTRIBUTING.md).\n\n## License\n\n[MIT](LICENSE) - Jota Teles - 2017\n\n## Special thanks\n\n* [Willian Ribeiro](https://github.com/willianribeiro);\n* [João Paulo](https://github.com/jpusp);\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteles%2Farray-mixer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteles%2Farray-mixer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteles%2Farray-mixer/lists"}