Recently, I was building an API in Nodejs , then I encountered a challenge, the challenge was that, I needed to transform the format of the response objects returned from the database into a different format before sending it out to the API.

I tried all I could, I wasn't getting what I wanted, I decided to use Google and stackoverflow , I still couldn't find a solution to my problem ( well,maybe my case was special), So I had to leave my code for about 2days, between this 2days I was racking my head thinking about the best way to approach this, after much thinking I decided to get back at it, after few tries I finally found a solution.

I was happy and relieved, so I thought to my self, "someone out there might be facing same challenge, why not write an article about it?" , which lead to this article.

What was the challenge?

I have been talking about what happened but I haven't really mentioned the challenge, so what was the challenge? the challenge was that i had an array of objects returned from the database in this format :

[{
question:"quiz question",
answer1:" quiz answer1",
answer2: "quiz answer2",
answer3: "quiz answer3",
category:" JS"
}]

but I wanted the API to be in this format :

[{
question:"quiz question",
answers:[" quiz answer1","quiz answer2","quiz answer3"],
category:" JS"
}]

which means i needed to transform some of the properties into an array. but the answers I saw on Google was transforming all the object's properties into an array, but in my case I only needed to transform few properties in the object into an array.

How did I transform the object properties into an array ?

The first approach I used in transforming the object was this,

const quizArr=[{
question:"quiz question",
answer1:" quiz answer1",
answer2: "quiz answer2",
answer3: "quiz answer3",
category:" JS"
}];

let answersArr= [];
const newArr=[];
for(let i=0; i < quizArr.length; i+=1){
answersArr=[quizArr[i].answer1,quizArr[i].answer2,quizArr[i].answer3];
newArr.push({['answers']:answersArr,['question']:quizArr[i].question,['category']:quizArr[i].category});

}

the above code did the job, but it looked rough, so i decided to refactor it to this:

const quizArr=[{
question:"quiz question",
answer1:" quiz answer1",
answer2: "quiz answer2",
answer3: "quiz answer3",
category:" JS"
}]; 


function answersTransformer(array=[]){
let answersArr=[];
const newArr=[];
for(const item of array){
answersArr[item.answer1,item.answer2,item.answer3];
delete item.answer1;
delete item.answer2;
delete item.answer3;
newArr.push({['answers']:answersArr,...item});
}
return newArr;
}

const transformedAnswer= answersTransformer(quizArr);
// returns this;
/*
[{
question:"quiz question",
answers:[" quiz answer1","quiz answer2","quiz answer3"],
category:" JS"
}]
*/

Let me explain what happened in the above code,

• i loop through the quizArr array.
• passed answer1,answer2 and answer3 properties into the answersArr array,
• then i deleted them from the item object.
• finally, i used the spread operator to pass in the remaining properties into the newArr.

why did I delete those object properties?

I deleted those properties because, if I don't delete them, they will be included in the newArr when I did ...item. but if you don't want to use the delete keyword, then you will have to pass in each property manually like this.

newArr.push({['answers']:answersArr, ['question']:item.question,['category']:item.category});

and that's it.

Summary

In this article, i have showed you how to transform some object properties into an array in JavaScript , alongside different ways to approach it.

if you found this article helpful, do let me know in the comments.