How can items be categorized by their color, size, and design?

[{
  boxNoFrom: 1,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "2X",
  style: "ZIP UP"
{
  boxNoFrom: 13,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "2X",
  style: "ZIP UP"
},
{
  boxNoFrom: 14,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "2X",
  style: "ZIP UP"
},
{
  boxNoFrom: 22,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "3X"
  style: "ZIP UP"
},
{
  boxNoFrom: 178,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "XXL"
  style: "ZIP UP"
},
{
  boxNoFrom: 198,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "XXS",
  style: "ZIP UP"
},
{
  boxNoFrom: 206,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "2X",
  style: "ZIP UP"
},
{
  boxNoFrom: 203,
  boxs: [{…}],
  color: "ESPRESSO",
  size: "XXS",
  style: "ZIP UP"
}]

How to categorize data based on color/size/style? For instance, grouping items with the same color, size, and style. It is necessary to rearrange the order accordingly. The boxNoFrom 206 should follow after the boxNoFrom 14, and boxNoFrom 203 will come after boxNoFrom: 198. Here is an example:

  [{
      boxNoFrom: 1,
      boxs: [{…}],
      color: "ESPRESSO",
      size: "2X",
      style: "ZIP UP"
    {
      boxNoFrom: 13,
      boxs: [{…}],
      color: "ESPRESSO",
      size: "2X",
      style: "ZIP UP"
    },
    {
      boxNoFrom: 14,
      boxs: [{…}],
      color: "ESPRESSO",
      size: "2X",
      style: "ZIP UP"
    },
    {
      boxNoFrom: 206,
      boxs: [{…}],
      color: "ESPRESSO",
      size: "2X",
      style: "ZIP UP"
    }
    {
      boxNoFrom: 22,
      boxs: [{…}],
      color: "ESPRESSO",
      size: "3X"
      style: "ZIP UP"
    },
    {
      boxNoFrom: 178,
      boxs: [{…}],
      color: "ESPRESSO",
      size: "XXL"
      style: "ZIP UP"
    },
        {
          boxNoFrom: 203,
          boxs: [{…}],
          color: "ESPRESSO",
          size: "XXS",
          style: "ZIP UP"
        }]

If a new boxNoFrom matches the same color, size, and style, it should be placed sequentially following the previous one. For example, if a new boxNoFom with number 204 shares the attributes:

color: "ESPRESSO",
size: "2X",
style: "ZIP UP"

it will be positioned after 203.

javascriptarraystypescriptobjectgroup-by

Answer №1

If you're looking to organize your data, consider using Map in your code.

I have simplified the explanation for better comprehension.

let array = [
       {value: 1, color: "A"},
       {value: 2, color: "B"}, 
       {value: 3, color: "A"}, 
       {value: 4, color: "B"}
]

let mappedData = new Map();

array.forEach(item => {
    mappedData[item.color] = mappedData[item.color] || []
    mappedData[item.color].push(item) 
})

console.log(mappedData["A"])

console.log(mappedData["B"])

let order = ["B", "A"]
let arrangedData = []

order.map(color => {
    arrangedData = [...arrangedData, ...mappedData[color]]
})

console.log(arrangedData)

I trust this explanation will be beneficial to you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The absence of certain attributes in TypeScript

class DeploymentManager { import { observable, action, makeAutoObservable } from "mobx" public deploymentQueue = observable<IDeploymentProject>([]); public inProgressProjects = observable<IDeploymentProject>[]; public s ...

reactjstypescriptmobx

Is it better to define a function within useEffect or externally?

What is the reason behind defining the fetchData function inside the useEffect instead of outside? Link: https://github.com/zeit/next.js/blob/canary/examples/with-graphql-faunadb/lib/useFetch.js import { useState, useEffect } from 'react' exp ...

javascriptreactjsreact-hooksnext.js

Creating a way for a Node and React application to share classes

I am in the process of developing a Node and React application, both implemented using TypeScript. The directory structure of my project is illustrated below: https://i.sstatic.net/914A1.png My query: Given that I am utilizing the same programming langu ...

javascriptnode.jsreactjstypescript

Learn how to generate a DataTable in C# by parsing multiple nested JSON Objects efficiently

Whenever I receive dynamic JSON data, it could be a JSON array, a simple JSON object, or nested JSON objects. I am attempting to deserialize and convert the JSON object/array into a DataTable for further processing using Newtonsoft.Json. Here is my curre ...

javascriptc#arraysjson

Executing JavaScript when a specific portion of a webpage loads in the presence of AJAX: A guide

As I tackle a project that involves loading elements via AJAX within a CMS-type software, I find myself restricted in accessing the AJAX code and its callbacks. One specific challenge I face is running my function only when a certain part of the page is l ...

javascriptajaxdomload

Three.js - Attempting to apply a texture to a plane consistently results in a black rendering

I'm having trouble applying a texture to a plane. The image I'm using is 256x256, but it's rendering black instead of showing the texture. Can anyone point out where I might be making a mistake? //set up the floor var floorTexture = new TH ...

javascript3dthree.js

Is there a way to include values in the body of an HTTP GET request using Angular?

I've created a function in my service that looks like this: /** * Retrieve all data * @param sendSelectedValues string */ getAllActPlanBalanceYearData(sendSelectedValues: any): Observable<any> { const url = `/yearlyvalues/act-and ...

javascriptangulartypescripthttpget

What measures can be taken to keep the rightmost element from moving when hovered over?

While I am generally happy with the layout, there seems to be a slight jump to the left when hovering over the right-most image (you need to click "show images" to view them). Strangely, this issue does not occur with the last row of images. Any suggestion ...

javascriptjqueryhtmlcss

Incorporate a button within a listview on Kendoui to trigger the opening of a modal window

I am seeking assistance on how to insert a button on each element of a Listview (PHP/Json) result. When clicked, this button should open a modal window where the customer can input reservation details such as Date, Adults, and Children. Below is the JavaSc ...

javascriptjqueryhtmlkendo-ui

Pass information submitted through a JavaScript prompt to an expressjs endpoint

I'm currently facing a challenge in extracting the value from my prompt in order to modify a category using a JavaScript function. Typically, I would rely on a form to pass variables to the request.body, but that's not an option here. This is wh ...

javascripthtmlnode.jsexpress

Provide JSON data on a designated pathway

I'm currently working on setting up a basic API that will respond with JSON data when accessed at the path /json The goal is to send back the object {"message": "Hello json"} in JSON format whenever a GET request is made to the /j ...

javascriptnode.jsjsonexpress

What steps can I take to set a strict boundary for displaying the address closer to the current location?

While the autocomplete feature works perfectly for me, I encountered an issue where it suggests directions away from my current location when I start typing. I came across another code snippet that uses plain JavaScript to solve this problem by setting bou ...

javascripthtmlangulartypescriptgoogle-maps-api-3

Ensuring the accuracy of user input in JavaScript, even after fixing a mistake and submitting again, will not cause the code to exit the else clause

I am currently working on a coupon code field that needs to accept a specific set of coupon keys. Below is the code I have written for validation. If a user enters an invalid key at first, they receive an alert saying "Invalid Key." However, if they corr ...

javascriptjqueryhtmlarraysloops

What is the best method for creating a 10-page PHP form that contains more than 100 input fields in an efficient manner?

I am currently in the process of constructing a substantial PHP form that will extend over 10 pages and contain well over 100 input fields. Each input will be stored in a database. I am starting to encounter challenges keeping track of all the variables as ...

phpjavascriptmysqlajax

Activating a link click inside a table with jquery

I have been attempting to trigger a click on an anchor within the table compareTable with the code below, however it does not appear to be working as expected. Would anyone be able to provide insight into a possible solution? $('#compareTable a' ...

javascriptjquery

Transform a C++ text file containing columns into a two-dimensional vector

I'm facing a challenge where I need to extract values from a text file and store them in a 2D vector. While I know how to achieve this using arrays, I am not sure about the process when it comes to vectors. The size of the vector should be dynamic, ...

c++arraysvectorroot

What manner must I understand this syntax?

After stumbling upon this code snippet online, I was left scratching my head: function cjsDetectionPlugin() { return { name: 'cjs-detection', moduleParsed({ id, meta: { commonjs: { isCommonJS } } }) { ...

javascriptecmascript-6

Vue .filter doesn't work with reactive data sources

I'm currently working on a project that involves creating a dynamic shipping estimate in a Shopping Cart. The challenge I face is retrieving shipping methods from an API endpoint and making the data reactive to update in real-time based on the selecte ...

javascriptvue.js

"Troubleshooting Angular: Uncovering the Root of the Issue with

I have set a specific pattern for the email field which should follow this format: pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(( ...

javascriptangularjs

Implementing objects in a three.js scene without displaying them on the screen

I have a function called createCylinder(n, len, rad) that is being invoked from another function named createScene(). Despite checking that the vertices and faces are correctly added without errors, the geometry itself is not rendering. I suspect this is ...

javascriptthree.js