Methods for organizing consecutive elements within an array in Javascript/Typescript

Let's explore this collection of objects:

[
    {
        key1: "AAA",
        key2: "BBB"
    },
    {
        key1: "BBB",
        key2: "CCC"
    },
    {
        key1: "CCC",
        key2: "DDD"
    },
    {
        key1: "XXX",
        key2: "YYY"
    },
]

How can we create a simple function to group these objects in a way that if the key1 of the next object matches the key2 of the previous one, they are combined into a single object?

The expected result from the above set of objects would be:

[
    {
        key1: "AAA",
        key2: "DDD"
    },
    {
        key1: "XXX",
        key2: "YYY"
    },
]
javascripttypescript

Answer №1

One efficient way to achieve this is by utilizing the reduce method in JavaScript:

const data = [
    {
        key1: "AAA",
        key2: "BBB"
    },
    {
        key1: "BBB",
        key2: "CCC"
    },
    {
        key1: "CCC",
        key2: "DDD"
    },
    {
        key1: "XXX",
        key2: "YYY"
    },
]

const result = data.reduce( (accumulator,item) => {  
  const lastItem = accumulator[accumulator.length-1];
  if(lastItem === undefined || lastItem.key2 != item.key1){
    accumulator.push({...item});      
  }
  else{
    accumulator[accumulator.length-1] = {...lastItem, key2:item.key2};
  }
  return accumulator;
},[]);

console.log(result);

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

Changing Three.js from mouse interaction to a random movement pattern

Recently, I came across this interesting website with a background that lights up depending on the movement of your mouse. I was wondering if there is a way to make that illuminated spot move around on its own. If you want to see how it looks, check out th ...

javascriptthree.js

Sending data to another page by selecting a list item

Being new to web programming and JavaScript, I am facing a scenario where I have a list of requests displayed on one page and I need to pass the ID of the selected request to another page to display all the details of that particular request. I am strugg ...

javascriptphpjqueryhtml

The presence of parentheses in a JQuery selector

My database contains divs with ids that sometimes have parentheses in them. This is causing issues with my JQuery selector. How can I resolve this problem? Let me provide an example to illustrate: https://jsfiddle.net/2uL7s3ts/1/ var element = 'hel ...

javascriptjqueryhtml

Post Request to Express API does not produce any output

Today, I encountered an issue while trying to create a JWT authentication API in Express. When I send a POST request with Postman, it only returns {}. Below is the code for server.js: const express = require("express"); const mongoose = require("mongoos ...

javascriptrestapiexpresspostman

Despite passing the same dependency to other services, the dependencies in the constructor of an Angular2 Service are still undefined

To successfully integrate the "org-agents-service" into the "org-agents-component," I need to resolve some dependencies related to the required api-service. Other components and services in the hierarchy are also utilizing this api-service, which acts as a ...

angulartypescriptdependency-injectionwebpackangular2-services

Unclear on the usage of "this" in arrow functions?

After going through various discussions and articles on this topic, I find myself still perplexed about the meaning of this in arrow functions. I've been encountering run-time errors with a code snippet similar to the following: export class Foo imp ...

javascriptangulartypescript

How to use VueJS to detect changes in a value and trigger animations

Within my Vue.js application, I am looking to incorporate animations for a number/value that changes dynamically based on data retrieved from the Vuex store. Although I have managed to initiate the animation successfully, I am encountering an issue where ...

javascriptvue.jsvuejs2

The functionality of the Vert.x event bus client is limited in Angular 7 when not used within a constructor

I have been attempting to integrate the vertx-eventbus-client.js 3.8.3 into my Angular web project with some success. Initially, the following code worked perfectly: declare const EventBus: any; @Injectable({ providedIn: 'root' }) export cl ...

angulartypescriptvert.xvertx-eventbus

Instructions on removing an HTML element from a div that has the attribute contentEditable

Here is an example of HTML code: <div id="editable" contentEditable="true"> <span contentEditable="false">Text to remove</span> </div> I want to be able to delete the entire span element (along with its text) with just one bac ...

javascripthtmlfbjs

Remove the active class from a list item using History.js

My goal is to add the active class to a link when clicked in my AJAX app, triggering statechange on History.js. I'm struggling with saving the current active link(s) with the state so that the active class is appropriately added or removed when naviga ...

javascripthistory.js

Tips for creating a static background when displaying a modal popup in AngularJS

Incorporating a modal popup to modify a row within a grid view has been my recent task. Leveraging the row.getProperty() function, I successfully extracted the row values within the modal. However, an inconvenience emerged when attempting to edit a value ...

javascriptangularjstwitter-bootstrap

Building an Angular CLI application with Typescript that handles multiple HTTP calls using polling through a timer

I am working with a Django backend and I need to check the status of multiple Celery Tasks () every 3 seconds. For instance, let's say I have 4 task IDs: 3099023 3493494 4309349 5498458 My goal is to make an http.get<...>(backend) call every ...

angulartypescripthttpdjango-celerypolling

What could be causing my website's screen resolution to not fit properly on mobile devices?

Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine ...

javascripthtmlcssresolutionscreen-resolution

Instructions for implementing personalized horizontal and vertical scrolling within Angular 9

I am currently working on an angular application where users can upload files, and I display the contents of the file on the user interface. These files may be quite long, so I would need vertical scrolling to navigate through them easily. Additionally, fo ...

javascripthtmlcssangulartypescript

Switch out the image in the dropdown and update the button once it is selected

In this scenario, I am looking to dynamically change the image in a button dropdown when it is clicked. The goal is for the dropdown image to swap and replace with the actual one upon clicking. For reference, here's the fiddle: https://jsfiddle.net/32 ...

javascriptjquerycss

invoking a JavaScript function from an HTML file

I want to create a JavaScript server on Raspbian that not only serves .html content to the browser but also allows for user input through events like button clicks. Both my .html and .js files are located in the same directory, and I have used absolute pat ...

javascripthtmlnode.jswebserver

Exploring the dissimilarity among npm run dev and the parcel index.html

I have been using parcel index.html to set up a local development server, bundling, and hot module replacement. However, I recently learned that npm run dev can do something similar. This has left me wondering: What are the distinctions between the two me ...

javascriptnode.jsnpmparcel

What is the best way to read a local text file and store its contents in a string variable within a

Within my ReactNative project, I am seeking to retrieve the content of static text files and store it in a string variable. Here is an example of how I would like to achieve this: var content = loadPlainTextFile("resources/tags.txt"); var tags = content.s ...

javascriptreactjsreact-native

I am having trouble getting the guide for setting up a NextJS app with Typescript to function properly

For some time now, I have been experimenting with integrating Typescript into my NextJS projects. Initially, I believed that getting started with Typescript would be the most challenging part, but it turns out that installing it is proving to be even more ...

typescriptnpmnext.js

I am encountering an issue where I am unable to send a HashMap String to a PHP server, and I am not receiving a JSONArray in the

How can I send a hashmap string to a PHP server without receiving back a JsonArray using Volley in Android? CM =$_POST['code_send']; $db =Db::getInstance(); $records = $db->query ("SELECT * FROM p_users WHERE c_meli='$CM'"); $js ...

javascriptphpandroidjson