What is the best way to convert rows into columns within an array of values?

Question

What is the best way to convert rows into columns within an array of values?

Below is the structure of my data:

let information = [
    { 
    X:[
    {title: 'Example1', quantity: 25},
    {title: 'Example2', quantity: 35}
    ], 
    Y:[
    {title: 'Sample3', quantity: 45},
    {title: 'Sample4', quantity: 55}
    ] 
    },
    {
    X:[
    {title: 'Example1', quantity: 250},
    {title: 'Example2', quantity: 350}
    ], 
    Y:[
    {title: 'Sample3', quantity: 450},
    {title: 'Sample4', quantity: 550}
    ]}
  ]

This is how I want to reorganize my data: https://i.sstatic.net/PSHni.png

You can see the array structure in JSFiddle here: https://jsfiddle.net/rj5e38v9/3/

javascript arrays object transpose

Answer 1

Answer №1

To generate a table, you can utilize array reduce method to create an object with keys A and B. Then, iterate through this object to populate the table.

var data = [{
    A: [{
        name: 'Test1',
        amount: 20
      },
      {
        name: 'Test2',
        amount: 30
      }
    ],
    B: [{
        name: 'Test3',
        amount: 40
      },
      {
        name: 'Test4',
        amount: 50
      }
    ]
  },
  {
    A: [{
        name: 'Test1',
        amount: 200
      },
      {
        name: 'Test2',
        amount: 300
      }
    ],
    B: [{
        name: 'Test3',
        amount: 400
      },
      {
        name: 'Test4',
        amount: 500
      }
    ]
  }
]

const val = data.reduce((acc, curr) => {
  for (let keys in curr) {
    if (!acc.hasOwnProperty(keys)) {
      acc[keys] = [];
    }
    acc[keys].push(...curr[keys])

  }
  return acc;
}, {});

let tableStr = ''
for (let keys in val) {
  tableStr += `<ul>
  <li class="headerList">${keys}</li>
  ${val[keys].map(elem=>{return '<li><span>'+elem.name+'<span class="valCol">'+elem.amount+'</span></li>'})}
  
 </ul>`
}


document.getElementById('dataDisplay').innerHTML = tableStr

li {
  list-style-type: none
}

.valCol {
  margin-left: 50px;
  color: green;
}

.headerList {
  font-style: bold;
  font-size: 50px;
}

<div id="dataDisplay">


</div>

Answer 2

To generate a table, you can utilize array reduce method to create an object with keys A and B. Then, iterate through this object to populate the table.

var data = [{
    A: [{
        name: 'Test1',
        amount: 20
      },
      {
        name: 'Test2',
        amount: 30
      }
    ],
    B: [{
        name: 'Test3',
        amount: 40
      },
      {
        name: 'Test4',
        amount: 50
      }
    ]
  },
  {
    A: [{
        name: 'Test1',
        amount: 200
      },
      {
        name: 'Test2',
        amount: 300
      }
    ],
    B: [{
        name: 'Test3',
        amount: 400
      },
      {
        name: 'Test4',
        amount: 500
      }
    ]
  }
]

const val = data.reduce((acc, curr) => {
  for (let keys in curr) {
    if (!acc.hasOwnProperty(keys)) {
      acc[keys] = [];
    }
    acc[keys].push(...curr[keys])

  }
  return acc;
}, {});

let tableStr = ''
for (let keys in val) {
  tableStr += `<ul>
  <li class="headerList">${keys}</li>
  ${val[keys].map(elem=>{return '<li><span>'+elem.name+'<span class="valCol">'+elem.amount+'</span></li>'})}
  
 </ul>`
}


document.getElementById('dataDisplay').innerHTML = tableStr

li {
  list-style-type: none
}

.valCol {
  margin-left: 50px;
  color: green;
}

.headerList {
  font-style: bold;
  font-size: 50px;
}

<div id="dataDisplay">


</div>

What is the best way to convert rows into columns within an array of values?

Answer №1

Similar questions

The server encountered an error: TypeError - It is not possible to convert undefined or null into an

Prevent scrolling on browser resize event

Is it possible to assign values from a double array to corresponding elements in a string array?

Fill the angular ui-bootstrap popover with content

Using jQuery to organize object properties based on the value of another property

Two distinct iterations of the identical jquery version sourced from external sources

When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

observable arrays in knockoutjs

Ways to eliminate the design from a previously selected list item

Questions regarding prototype-based programming in Javascript

Steps for updating inputs using a modal selection

mention the element to display on the pagination

What is the best way to retrieve the value from local storage?

Mouseover feature for image is functioning, but having issues with alignment

Connecting Peers in Windows Store App using HTML/JS

Typescript's tree-pruning strategy design for optimization

A guide on inputting numbers into an array in C without the need to define the array size

Is there a way to display the description field instead of the Id in a table using pxp-ui?

In PHP, validate if an array includes a portion of a specific value

The hyperlink and criteria provided are accurate, however, the webpage remains stagnant