Change the order of elements in an array using JavaScript

Question

Change the order of elements in an array using JavaScript

I have a set of objects retrieved from an API.

let objectList = [
  {title: 'Big Bang Theory'},
  {title: 'Breaking Bad'},
  {title: 'Stranger Things'},
  {title: 'Game of Thrones'},
  {title: 'Money Heist'}
];

In my data, I want Game of Thrones to always appear before Stranger Things, while keeping the other elements in their original order. Sometimes the API will provide them correctly arranged, but sometimes they will be reversed like in the example above.

Does anyone have suggestions on the most efficient approach for achieving this?

I am aware of using a loop and conditional statements, but I believe there might be a more optimal solution available.

for(let i = 0; i < objectList.length; i++){
  if(objectList[i].title === 'Game of Thrones' && objectList[i - 1].name === 'Stranger Things'){
    let tempObject = objectList[i];
    objectList[i] = objectList[i - 1];
    objectList[i - 1] = tempObject;
  }
}

Alternatively, should I consider creating a new array rather than modifying the existing one?

javascript arrays ecmascript-6

Answer 1

Answer №1

let bands = [
  {name: 'Blur'},
  {name: 'The Beatles'},
  {name: 'Oasis'},
  {name: 'Elvis'},
  {name: 'Arctic Monkeys'},
];

// Find and rearrange the position of Oasis and Arctic Monkeys
let oasisIndex = -1, monkeyIndex = -1;                       
for(let i = 0; i < bands.length && (oasisIndex === -1 || monkeyIndex === -1); i++) { 
  if(bands[i].name === "Arctic Monkeys") monkeyIndex = i;
  else if(bands[i].name === "Oasis") oasisIndex = i;      
}

if(oasisIndex !== -1 && monkeyIndex !== -1 && monkeyIndex !== oasisIndex - 1) { 
  let monkeyBand = bands.splice(monkeyIndex, 1)[0];             
  bands.splice(oasisIndex, 0, monkeyBand);                   
}

console.log(bands);

Answer 2

let bands = [
  {name: 'Blur'},
  {name: 'The Beatles'},
  {name: 'Oasis'},
  {name: 'Elvis'},
  {name: 'Arctic Monkeys'},
];

// Find and rearrange the position of Oasis and Arctic Monkeys
let oasisIndex = -1, monkeyIndex = -1;                       
for(let i = 0; i < bands.length && (oasisIndex === -1 || monkeyIndex === -1); i++) { 
  if(bands[i].name === "Arctic Monkeys") monkeyIndex = i;
  else if(bands[i].name === "Oasis") oasisIndex = i;      
}

if(oasisIndex !== -1 && monkeyIndex !== -1 && monkeyIndex !== oasisIndex - 1) { 
  let monkeyBand = bands.splice(monkeyIndex, 1)[0];             
  bands.splice(oasisIndex, 0, monkeyBand);                   
}

console.log(bands);

Answer 3

Answer №2

Presented here is a function that accepts an array along with two specific item names from within that array. It works to ensure that the first specified item comes directly before the second specified item!

var arrangeProperly = function(arr, firstItem, secondItem) {
    // Locate the indices of the specified items
    var firstInd = -1;
    var secondInd = -1;
    for (var i = 0; i < arr.length; i++) {
         if (arr[i].name === firstItem) firstInd = i;
         if (arr[i].name === secondItem) secondInd = i;

         // Stop searching once both indices are found
         if (firstInd > -1 && secondInd > -1) break;
    }

    // Ensure correct order between the indices
    var loInd = Math.min(secondInd, firstInd);
    var hiInd = Math.max(secondInd, firstInd);

    // Items before and after specified indices
    var itemsBefore = arr.slice(0, loInd);
    var itemsAfter = arr.slice(hiInd + 1);

    // Items between the specified indices
    var itemsBetween = arr.slice(loInd + 1, hiInd);

    /*
    The strategy here involves adding items in particular sequence.
    We can add 'itemsBefore' at the beginning, 'itemsAfter' at the end.
    Handling items between depends on which of the specified items comes first.
    */

    var result = itemsBefore;

    if (secondInd < firstInd) {
        result.push(arr[firstInd]);
        result.push(arr[secondInd]);
    }

    result = result.concat(itemsBetween);

    if (secondInd > firstInd) {
        result.push(arr[firstInd]);
        result.push(arr[secondInd]);
    }

    result = result.concat(itemsAfter);

    return result;
};

Now implement this code on your custom array:

let arr = [
    {name: 'Forest'},
    {name: 'The Redwoods'},
    {name: 'Maple Trees'},
    {name: 'Palm Trees'},
    {name: 'Birch'}
];
let reOrderedArr = arrangeProperly(arr, 'Maple Trees', 'Palm Trees');

Note that for efficiency reasons, it might be advisable to consider improving your API setup.

Answer 4

Presented here is a function that accepts an array along with two specific item names from within that array. It works to ensure that the first specified item comes directly before the second specified item!

var arrangeProperly = function(arr, firstItem, secondItem) {
    // Locate the indices of the specified items
    var firstInd = -1;
    var secondInd = -1;
    for (var i = 0; i < arr.length; i++) {
         if (arr[i].name === firstItem) firstInd = i;
         if (arr[i].name === secondItem) secondInd = i;

         // Stop searching once both indices are found
         if (firstInd > -1 && secondInd > -1) break;
    }

    // Ensure correct order between the indices
    var loInd = Math.min(secondInd, firstInd);
    var hiInd = Math.max(secondInd, firstInd);

    // Items before and after specified indices
    var itemsBefore = arr.slice(0, loInd);
    var itemsAfter = arr.slice(hiInd + 1);

    // Items between the specified indices
    var itemsBetween = arr.slice(loInd + 1, hiInd);

    /*
    The strategy here involves adding items in particular sequence.
    We can add 'itemsBefore' at the beginning, 'itemsAfter' at the end.
    Handling items between depends on which of the specified items comes first.
    */

    var result = itemsBefore;

    if (secondInd < firstInd) {
        result.push(arr[firstInd]);
        result.push(arr[secondInd]);
    }

    result = result.concat(itemsBetween);

    if (secondInd > firstInd) {
        result.push(arr[firstInd]);
        result.push(arr[secondInd]);
    }

    result = result.concat(itemsAfter);

    return result;
};

Now implement this code on your custom array:

let arr = [
    {name: 'Forest'},
    {name: 'The Redwoods'},
    {name: 'Maple Trees'},
    {name: 'Palm Trees'},
    {name: 'Birch'}
];
let reOrderedArr = arrangeProperly(arr, 'Maple Trees', 'Palm Trees');

Note that for efficiency reasons, it might be advisable to consider improving your API setup.

Answer 5

Answer №3

To efficiently address this issue, my recommendation is to implement a specific sorting rule on the server side. If you need a quick fix for the client-side scenario, you can try the following approach:

let arr = [
  {name: 'Blur'},
  {name: 'The Beatles'},
  {name: 'Oasis'},
  {name: 'Arctic Monkeys'},
  {name: 'Elvis'}
]

console.log(arr.map(o => o.name))

let iO = arr.findIndex(o => o.name === 'Oasis')
let iA = arr.findIndex(o => o.name === 'Arctic Monkeys')

if ((iA !== -1 && iO !== -1) && iA > iO) {
  let o = arr[iO]
  let a = arr[iA]
  arr[iO] = a
  arr[iA] = o
}

console.log(arr.map(o => o.name))

Answer 6

To efficiently address this issue, my recommendation is to implement a specific sorting rule on the server side. If you need a quick fix for the client-side scenario, you can try the following approach:

let arr = [
  {name: 'Blur'},
  {name: 'The Beatles'},
  {name: 'Oasis'},
  {name: 'Arctic Monkeys'},
  {name: 'Elvis'}
]

console.log(arr.map(o => o.name))

let iO = arr.findIndex(o => o.name === 'Oasis')
let iA = arr.findIndex(o => o.name === 'Arctic Monkeys')

if ((iA !== -1 && iO !== -1) && iA > iO) {
  let o = arr[iO]
  let a = arr[iA]
  arr[iO] = a
  arr[iA] = o
}

console.log(arr.map(o => o.name))

Answer 7

Answer №4

One way to approach this problem is by using an object to store the names and then checking if both names are present in the object.

It's important to note that while using the Array#sort method can be helpful, the stability of its results may vary depending on the sorting algorithm being used.

let arr = [{ name: 'Blur' }, { name: 'The Beatles' }, { name: 'Oasis' }, { name: 'Arctic Monkeys' }, { name: 'Elvis' }],
order = { 'Arctic Monkeys': 1, Oasis: 2 };

arr.sort((a, b) => (b.name in order) && (a.name in order) ? order[a.name] - order[b.name] : 0);

console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 8

One way to approach this problem is by using an object to store the names and then checking if both names are present in the object.

It's important to note that while using the Array#sort method can be helpful, the stability of its results may vary depending on the sorting algorithm being used.

let arr = [{ name: 'Blur' }, { name: 'The Beatles' }, { name: 'Oasis' }, { name: 'Arctic Monkeys' }, { name: 'Elvis' }],
order = { 'Arctic Monkeys': 1, Oasis: 2 };

arr.sort((a, b) => (b.name in order) && (a.name in order) ? order[a.name] - order[b.name] : 0);

console.log(arr);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Change the order of elements in an array using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

HighCharts fails to display on Polymer webpage

Store data in Firebase Storage and retrieve the link to include it in Realtime Database

Aligning dynamically-sized TextInput in React Native

Struggling with routing in Node.js while working on REST API development via HTTP

Implementing an Onclick function in HTML

Retrieve information from an external JSON file and display it in a jstree

Troubleshooting TypeScript window augmentation not functioning in individual modules

How to implement mouse event handling on elements in a d3.js integrated Vue component?

jQuery does not have the capability to automatically calculate Value Added Tax on form submissions

Using Javascript to assign a hidden form value when the drop down selection changes - having trouble populating options from an array in Javascript

Error 404 in NodeJS: Page Not Found

Guide: How to include a date value within a JSON format? [See code snippet below]

Monitor checkbox status to trigger confirmation dialog

Custom number of arrays specified by the user

Deactivate numerous buttons with the help of jQuery

Disseminate several outcomes using a Discord bot

Unpacking jQuery's fancybox collection

What methods can a server use to identify if JQuery Ajax's "withCredentials: true" option was utilized for CORS requests?

Retrieve a specific value from an array of objects by searching for a particular object's value

Retrieve data from two databases and display the information from two separate arrays on a single ejs page after making two separate database calls