Merge adjacent elements within an array to create a fresh array

Question

Merge adjacent elements within an array to create a fresh array

Here is a demo array with a variable length (n).

[{
"name": "question",
"value": "this is the first question"
},
{
"name": "answer",
"value": "this is the first answer"
},
{
"name": "question",
"value": "this is the second question"
},
{
"name": "answer",
"value": "this is the second answer"
}
]

I am looking to combine two consecutive objects for the desired output.

[{"question":"This is the first question", "answer":"This is the first answer"}, {"question":"This is the second question", "answer":"This is the second answer"}]

Any ideas on how I can achieve this using JavaScript? I've been stuck on it for the past couple of days.

javascript arrays javascript-objects

Answer 1

Answer №1

If you're looking for a similar solution, you can give this code a try:

const info = [{
"name": "topic",
"value": "this is the first topic"
},
{
"name": "description",
"value": "this is the first description"
},
{
"name": "topic",
"value": "this is the second topic"
},
{
"name": "description",
"value": "this is the second description"
}
];

let newInfo = [];
for(let index=0,length=info.length;index<length;index=index+2) {
newInfo.push({
topic:info[index].value,
description: (info[index+1]||{}).value
});
}

console.log(newInfo);

Answer 2

If you're looking for a similar solution, you can give this code a try:

const info = [{
"name": "topic",
"value": "this is the first topic"
},
{
"name": "description",
"value": "this is the first description"
},
{
"name": "topic",
"value": "this is the second topic"
},
{
"name": "description",
"value": "this is the second description"
}
];

let newInfo = [];
for(let index=0,length=info.length;index<length;index=index+2) {
newInfo.push({
topic:info[index].value,
description: (info[index+1]||{}).value
});
}

console.log(newInfo);

Answer 3

Answer №2

Transform the array into two-element sub-arrays using the combination of map() and filter() methods, then convert these sub-arrays into objects utilizing the reduce method.

const questionsAndAnswers = [{
        "name": "question",
        "value": "this is a first question"
    },
    {
        "name": "answer",
        "value": "this is a frist answer"
    },
    {
        "name": "question",
        "value": "this is a second question"
    },
    {
        "name": "answer",
        "value": "this is a second answer"
    }
];

const transformedArray = questionsAndAnswers
//using map to create two-element sub-arrays; only odd values are mapped while even ones are []
.map((qa,i,arr) => i % 2 === 0 ? [qa,arr[i+1]] : [])
//only keeping sub-arrays with content (not empty)
.filter(qa => qa.length)
//converting each sub-array into an object
.map( qa => qa.reduce((transformedObj,{name,value}) => ({...transformedObj,[name]:value}), {}) );

console.log( transformedArray );

Employing reduce() in place of map() and filter()

const questionsAndAnswers = [{
        "name": "question",
        "value": "this is a first question"
    },
    {
        "name": "answer",
        "value": "this is a frist answer"
    },
    {
        "name": "question",
        "value": "this is a second question"
    },
    {
        "name": "answer",
        "value": "this is a second answer"
    }
];

const transformedArray = questionsAndAnswers
//convert the original array into two-element sub-arrays
.reduce((acc,qa,i,arr) => i % 2 === 0 ? [...acc,[qa,arr[i+1]]] : acc, [])
//convert each sub-array into an object
.map( qa => qa.reduce((transformedObj,{name,value}) => ({...transformedObj,[name]:value}), {}) );

console.log( transformedArray );

Using solely reduce()

const questionsAndAnswers = [{
        "name": "question",
        "value": "this is a first question"
    },
    {
        "name": "answer",
        "value": "this is a frist answer"
    },
    {
        "name": "question",
        "value": "this is a second question"
    },
    {
        "name": "answer",
        "value": "this is a second answer"
    }
];

const transformedArray = questionsAndAnswers
.reduce(
    (acc,{name,value},i,arr) => 
    i % 2 === 0 ? [...acc,{[name]:value,[arr[i+1].name]:arr[i+1].value}] : acc, []
);

console.log( transformedArray );

Answer 4

Transform the array into two-element sub-arrays using the combination of map() and filter() methods, then convert these sub-arrays into objects utilizing the reduce method.

const questionsAndAnswers = [{
        "name": "question",
        "value": "this is a first question"
    },
    {
        "name": "answer",
        "value": "this is a frist answer"
    },
    {
        "name": "question",
        "value": "this is a second question"
    },
    {
        "name": "answer",
        "value": "this is a second answer"
    }
];

const transformedArray = questionsAndAnswers
//using map to create two-element sub-arrays; only odd values are mapped while even ones are []
.map((qa,i,arr) => i % 2 === 0 ? [qa,arr[i+1]] : [])
//only keeping sub-arrays with content (not empty)
.filter(qa => qa.length)
//converting each sub-array into an object
.map( qa => qa.reduce((transformedObj,{name,value}) => ({...transformedObj,[name]:value}), {}) );

console.log( transformedArray );

Employing reduce() in place of map() and filter()

const questionsAndAnswers = [{
        "name": "question",
        "value": "this is a first question"
    },
    {
        "name": "answer",
        "value": "this is a frist answer"
    },
    {
        "name": "question",
        "value": "this is a second question"
    },
    {
        "name": "answer",
        "value": "this is a second answer"
    }
];

const transformedArray = questionsAndAnswers
//convert the original array into two-element sub-arrays
.reduce((acc,qa,i,arr) => i % 2 === 0 ? [...acc,[qa,arr[i+1]]] : acc, [])
//convert each sub-array into an object
.map( qa => qa.reduce((transformedObj,{name,value}) => ({...transformedObj,[name]:value}), {}) );

console.log( transformedArray );

Using solely reduce()

const questionsAndAnswers = [{
        "name": "question",
        "value": "this is a first question"
    },
    {
        "name": "answer",
        "value": "this is a frist answer"
    },
    {
        "name": "question",
        "value": "this is a second question"
    },
    {
        "name": "answer",
        "value": "this is a second answer"
    }
];

const transformedArray = questionsAndAnswers
.reduce(
    (acc,{name,value},i,arr) => 
    i % 2 === 0 ? [...acc,{[name]:value,[arr[i+1].name]:arr[i+1].value}] : acc, []
);

console.log( transformedArray );

Merge adjacent elements within an array to create a fresh array

Answer №1

Answer №2

Similar questions

Objects within an array are not sorted based on their properties

JavaScript accordions failing to open

What is the best way to integrate a VueJS application into an already established web page?

The debounce functionality provided by Lodash does not seem to be functioning properly within VueJS events

Tips for making sure your published npm package respects the baseUrl specified in the tsconfig.json file

The jQuery .load() method fails to retrieve a valid value from @Url.Action

Creating a platform for users to share their thoughts and engage in

Creating a Vue application without the use of vue-cli and instead running it on an express

Looking to adjust the title font size when exporting DataTable to Excel?

What is preventing me from displaying my paragraph?

Tips for displaying two input decorations in Material UI beside one another within a text field

What is the best way to send an array to a modal?

In version 81 of Three.js, the toShapes() function has been relocated to a new class. Find out how

What is the best way to display the contents of an array across multiple lines?

Customizing buttons on Dialogs in JavaScript to have dynamic names

Why isn't PHP json_encode properly encoding data?

Validating forms with dynamically populated fields using Jquery

Transform the components of an array into a mathematical formula and store it in a variable

Using PHP to convert JSON into a multi-dimensional array

Dealing with Angular.js $http intercept error "net::ERR_CONNECTION_REFUSED"