Question 74400 in Reactjs Question posted in
The new location for the React Documentation can be found here.

I need to sort an array in javascript – Reactjs

I am getting json data like this

[
  {

    "emission": [
      {
        "id": "fffda276-c7ed-4931-8211-48b3ae304b6f",
        "size": "Medium",
      }
    ],
    "id": "db9dd205-5986-432f-9aaf-1079d6fdd28c",
  },
  {
    "emission": [
      {
        "id": "5ae8991c-bbcd-4a97-a5ad-b1aac6d765c0",
        "size": "",
      },
      {
        "id": "f670609a-d200-4c03-a8a7-34e2b244a4c7",
        "size": "Small",
      }
    ],
    "id": "95a9c2eb-7dac-45d6-9a6a-2718859d91f3",
  },
  {
    "emission": [
      {
        "id": "77f5b953-772a-4e02-834f-6d7eb4236223",
        "size": "Medium",
      },
      {
        "id": "04e909bc-0087-479d-9f4d-8f4ad03f8dd0",
        "size": "Large",
      },
      {
        "id": "4a628027-3ec8-450c-943e-7dce96f0bbb4",
        "size": "Small",
      },
      {
        "id": "7c5c638b-bab6-4a10-ba3e-ebdc8939021d",
        "size": "Large",
      }
    ],
    "id": "bc38b226-78cd-4928-80a0-589a9da2cd40",
  },
  {
    "emission": [
      {
        "id": "e6011db7-0662-4b52-9d26-e6be07226826",
        "size": "Large",
      },
      {
        "id": "ad678447-3e18-4537-baa1-b762dc03f6cd",
        "size": "Medium",
      }
    ],
    "id": "e1c59ebd-b567-462f-ac00-068ff7938055",
  },
  {
    "emission": [
      {
        "id": "3525d215-e9eb-4417-8b35-902936181d29",
        "size": "Medium",
      },
      {
        "id": "4c023985-a3c0-4783-a9c3-d51a21bf63d9",
        "size": "Large",
      },
      {
        "id": "7ef8d908-8a29-4d40-bdfe-121895d01ebc",
        "size": "Medium",
      }
    ],
    "id": "d9e88ddc-1b7e-4a68-b087-46d365f266a3",
  }
]

I need to reorder entire data based on emission array’s size like large, medium and small, so that first array must be no of count of Large, then medium and small, it needs to be sorted

Note: some data can also be without size those data can be omitted, but still needs to be present in final sorted array

Output:

[
  
  {
    "emission": [
      {
        "id": "77f5b953-772a-4e02-834f-6d7eb4236223",
        "size": "Medium",
      },
      {
        "id": "04e909bc-0087-479d-9f4d-8f4ad03f8dd0",
        "size": "Large",
      },
      {
        "id": "4a628027-3ec8-450c-943e-7dce96f0bbb4",
        "size": "Small",
      },
      {
        "id": "7c5c638b-bab6-4a10-ba3e-ebdc8939021d",
        "size": "Large",
      }
    ],
    "id": "bc38b226-78cd-4928-80a0-589a9da2cd40",
  },
  {
    "emission": [
      {
        "id": "3525d215-e9eb-4417-8b35-902936181d29",
        "size": "Medium",
      },
      {
        "id": "4c023985-a3c0-4783-a9c3-d51a21bf63d9",
        "size": "Large",
      },
      {
        "id": "7ef8d908-8a29-4d40-bdfe-121895d01ebc",
        "size": "Medium",
      }
    ],
    "id": "d9e88ddc-1b7e-4a68-b087-46d365f266a3",
  },
  {
    "emission": [
      {
        "id": "e6011db7-0662-4b52-9d26-e6be07226826",
        "size": "Large",
      },
      {
        "id": "ad678447-3e18-4537-baa1-b762dc03f6cd",
        "size": "Medium",
      }
    ],
    "id": "e1c59ebd-b567-462f-ac00-068ff7938055",
  },
  {

    "emission": [
      {
        "id": "fffda276-c7ed-4931-8211-48b3ae304b6f",
        "size": "Medium",
      }
    ],
    "id": "db9dd205-5986-432f-9aaf-1079d6fdd28c",
  },
  {
    "emission": [
      {
        "id": "5ae8991c-bbcd-4a97-a5ad-b1aac6d765c0",
        "size": "",
      },
      {
        "id": "f670609a-d200-4c03-a8a7-34e2b244a4c7",
        "size": "Small",
      }
    ],
    "id": "95a9c2eb-7dac-45d6-9a6a-2718859d91f3",
  }
]
Tags:

2

Answers


  1. 0

    I couldn’t fully understand what you meant, but I assume a sorting by Large, Medium and Small might help you

    let data = [
  {
    "emission": [
      {
        "id": "fffda276-c7ed-4931-8211-48b3ae304b6f",
        "size": "Medium",
      }
    ],
    "id": "db9dd205-5986-432f-9aaf-1079d6fdd28c",
  },
  // ... other data objects
];

let sortedData = data.sort((a, b) => {
  let aCount = countSizes(a.emission, 'Large');
  let bCount = countSizes(b.emission, 'Large');
  if (aCount !== bCount) {
    return bCount - aCount;
  }
  aCount = countSizes(a.emission, 'Medium');
  bCount = countSizes(b.emission, 'Medium');
  if (aCount !== bCount) {
    return bCount - aCount;
  }
  aCount = countSizes(a.emission, 'Small');
  bCount = countSizes(b.emission, 'Small');
  return bCount - aCount;
});

function countSizes(emission, size) {
  return emission.filter(e => e.size === size).length;
}

console.log(sortedData);

    Explanation:

    In the code, the countSizes function is used to count the number of occurrences of a specific size in the emission array. The sort method is used to sort the data array based on the number of occurrences of Large, Medium, and Small sizes, in that order. The resulting sortedData array will have the data objects ordered based on the number of occurrences of the sizes in the emission array.

    Login or Signup to reply.
  2. 0

    You could count wanted type and sort descending.

    const
    count = ({ emission }, type) =>
        emission.reduce((r, { size }) => r + (type === size), 0),
    data = [{ emission: [{ id: "fffda276-c7ed-4931-8211-48b3ae304b6f", size: "Medium" }], id: "db9dd205-5986-432f-9aaf-1079d6fdd28c" }, { emission: [{ id: "5ae8991c-bbcd-4a97-a5ad-b1aac6d765c0", size: "" }, { id: "f670609a-d200-4c03-a8a7-34e2b244a4c7", size: "Small" }], id: "95a9c2eb-7dac-45d6-9a6a-2718859d91f3" }, { emission: [{ id: "77f5b953-772a-4e02-834f-6d7eb4236223", size: "Medium" }, { id: "04e909bc-0087-479d-9f4d-8f4ad03f8dd0", size: "Large" }, { id: "4a628027-3ec8-450c-943e-7dce96f0bbb4", size: "Small" }, { id: "7c5c638b-bab6-4a10-ba3e-ebdc8939021d", size: "Large" }], id: "bc38b226-78cd-4928-80a0-589a9da2cd40" }, { emission: [{ id: "e6011db7-0662-4b52-9d26-e6be07226826", size: "Large" }, { id: "ad678447-3e18-4537-baa1-b762dc03f6cd", size: "Medium" }], id: "e1c59ebd-b567-462f-ac00-068ff7938055" }, { emission: [{ id: "3525d215-e9eb-4417-8b35-902936181d29", size: "Medium" }, { id: "4c023985-a3c0-4783-a9c3-d51a21bf63d9", size: "Large" }, { id: "7ef8d908-8a29-4d40-bdfe-121895d01ebc", size: "Medium" }], id: "d9e88ddc-1b7e-4a68-b087-46d365f266a3" }];

data.sort((a, b) => 
    count(b, 'Large') - count(a, 'Large') ||
    count(b, 'Medium') - count(a, 'Medium') ||
    count(b, 'Small') - count(a, 'Small')
);

console.log(data);
    .as-console-wrapper { max-height: 100% !important; top: 0; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search