JSON data formatting through dynamic Key, Value

Question

I have a JSON response data. I want to display it as a tabular format but I am not able to do it correctly. please correct me where I am doing wrong.

Response Data

const response = [
    {
        "key": "Name",
        "data": [ "Tom", "Mark", "Jack" ]
    },
    {
        "key": "OfcLocation",
        "data": [ "USA", "Spain",  "Japan" ]
    },
    {
        "key": "IPAddress",
        "data": [  "XX.XXX.X.XX", "XX.XXX.X.XX", "XX.XXX.X.XX" ]
    },
    {
        "key": "Port",
        "data": [  "4300", "4080", "9200" ]
    },
    {
        "key": "Role",
        "data": [ "Admin",  "Limited",  "Admin" ]
    }
];

Desired Output Format

[
    { "Name": "Tom",  "OfcLocation": "USA",  "IPAddress": "XX.XXX.X.XX", "Port": "4300", "Role": "Admin" },
    { "Name": "Mark", "OfcLocation": "Spain", "IPAddress": "XX.XXX.X.XX", "Port": "4080", "Role": "Limited" },
    { "Name": "Jack", "OfcLocation": "Japan", "IPAddress": "XX.XXX.X.XX", "Port": "9200", "Role": "Admin" }
]

Code

let formatedData = [];
let rowArr = {};
for( let i=0; i< response.length; i++) {
    for( let j=0;j< response[i].data.length; j++) {
        rowArr[response[i].key] = response[i].data[j];
    }
    formatedData.push(rowArr);
}

Derek Wang · Accepted Answer · 2020-09-30 17:28:32Z

1

You can get the result you want using Array.reduce function.

const response = [
    {
        "key": "Name",
        "data": [ "Tom", "Mark", "Jack" ]
    },
    {
        "key": "OfcLocation",
        "data": [ "USA", "Spain",  "Japan" ]
    },
    {
        "key": "IPAddress",
        "data": [  "XX.XXX.X.XX", "XX.XXX.X.XX", "XX.XXX.X.XX" ]
    },
    {
        "key": "Port",
        "data": [  "4300", "4080", "9200" ]
    },
    {
        "key": "Role",
        "data": [ "Admin",  "Limited",  "Admin" ]
    }
];

const result = response.reduce((acc, cur) => {
  cur.data.forEach((item, index) => {
    if (acc.length <= index) {
      acc.push({
        [cur.key]: item
      });
    } else {
      acc[index][cur.key] = item;
    }
  });
  return acc;
}, []);
console.log(result);

answered Sep 30, 2020 at 17:28

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ANJYR Over a year ago

compare to for loop using reduce is the best approach. thanks

Gulielmus · Accepted Answer · 2020-09-30 17:28:12Z

1

You need to switch the inner and outer loop and put let rowArr = {}; inside the outer loop

let formatedData = [];
let rowArr = {};
for (let j = 0; j < response[0].data.length; j++) {
    let rowArr = {};
    for (let i = 0; i < response.length; i++) {
        rowArr[response[i].key] = response[i].data[j];
    }
    formatedData.push(rowArr);
}

answered Sep 30, 2020 at 17:28

Gulielmus

911 silver badge5 bronze badges

Comments

Stefan Dobre · Accepted Answer · 2020-09-30 18:07:15Z

1

Make an array of empty objects and put the data in them...

let sortedArray = [];
for(let i=0 ; i< response[0].data.length ; i++){
  sortedArray.push(new Object);
}


function sort() {
  response.forEach((el) => {
    el.data.forEach((elem, i) => {
      sortedArray[i][el.key] = elem;
    });
  });
}

sort();
console.log(sortedArray);

answered Sep 30, 2020 at 18:07

Stefan Dobre

1386 bronze badges

Collectives™ on Stack Overflow

JSON data formatting through dynamic Key, Value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related