How to transform object properties into an array in Javascript.
I was building an API in Nodejs,then I encountered a challenge, I needed to transform some of the response object's properties into an array.
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
andanswer3
properties into theanswersArr
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.