Transform JSON into an Array and generate a new Array from a collection of Arrays

I'm struggling with generating a table in Angular2 from JSON data because I need to pivot the information, but my usual method doesn't seem to work for this scenario.

Below is an excerpt of the JSON data I am working with:

[
  {
    "ValueDate": "2017-04-26T14:16:00",
    "AccountName": "CASHAUD",
    "Holding": 318622.53
  },
  ...
]

I attempted following a tutorial on converting columns to rows using JavaScript to pivot the JSON array. The result was an array of arrays as shown below:

The outcome wasn't bad; however, the headings are consistently located at [i][0] and the data can be found at [i + 1][j].

Does anyone have suggestions on how I could iterate through these arrays to generate either an object or another array that I can use to build a table?

javascriptarraysjsonangulartypescript

Answer №1

To create a brand new array consisting of three rows (representing ValueDate, AccountName, and Holding values) and then loop through the original values:

source = [{...}, {...} ... ];
result = [[], [], []];
source.forEach((row, index) => {
  result[0][index] = row.ValueDate;
  result[1][index] = row.AccountName;
  result[2][index] = row.Holding;
});

Take a look at this Plunker demo for reference: https://plnkr.co/edit/15ZmVUxhEyPLTlDmHCLb?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Injecting dynamic content using JavaScript

My goal is to develop a web page where clicking on any of the three images will cause the content to be inserted into the empty div located above the image links. Below is the JavaScript code I'm using: <script type="text/javascript" src="js/jque ...

javascriptjqueryhtml

Oops! The type error is indicating that you tried to pass 'undefined' where a stream was required. Make sure to provide an Observable, Promise, Array, or Iterable when working with Angular Services

I've developed various services to interact with different APIs. The post services seem to be functioning, but an error keeps popping up: ERROR TypeError: You provided 'undefined' where a stream was expected. Options include Observable, ...

angulartypescriptrxjs

Exploring Vue's feature of passing props and emitting events within nested components

Within my coding project, I am facing the challenge of properly implementing a parent component containing a form that includes a birthday component. This birthday component consists of two separate components within it. My task is to effectively pass prop ...

javascriptvue.jsvuejs2vue-props

The data stored in LocalStorage disappears when the page is refreshed

I'm facing an issue with the getItem method in my localStorage within my React Form. I have added an onChange attribute: <div className = 'InputForm' onChange={save_data}> I have found the setItem function to save the data. Here is ...

javascriptreactjslocal-storagepersist

Clicking on the prop in a React class component

This is the situation I am facing <List> {mainTags.map((mainTagItem) => { return ( <ListItem onClick={() => { setMainTag(mainTagItem.tag.tagId) }} button className={classes.mainTagItem}> <div className={classes. ...

javascriptreactjsmaterial-uilistitem

Is it possible for JavaScript code to access a file input from the terminal?

When I run the command cat input.txt | node prog.js >result.txt in my terminal, I need to use an input file. This is my code: var fs = require('fs'); var str = fs.readFileSync('input.txt', 'utf8'); str.replace(/^\s* ...

javascriptshell

Can a custom type guard be created to check if an array is empty?

There are various methods for creating a type guard to ensure that an array is not empty. An example of this can be found here, which works well when using noUncheckedIndexedAccess: type Indices<L extends number, T extends number[] = []> = T["le ...

typescripttypes

Shuffle array elements in JavaScript

I need help with manipulating an array containing nested arrays. Here's an example: const arr = [[red,green],[house,roof,wall]] Is there a method to combine the nested arrays so that the output is formatted like this? red house, red roof, red wall, g ...

javascriptarrays

Is it feasible to insert the result of a JavaScript code into a PHP script?

Alternatively, you can view both codes side by side on the panelbackup(dot)com/codes page Alright, I have a code placed on page 1.html that adds four random numbers at the end of any given URL: <head><script>window.onload = function() { ...

phpjavascript

Troubleshooting: How to resolve the issue of "Error [ERR_HTTP_HEADERS_SENT]: Unable to set headers after they have been sent to the client"

* **> const PORT=8000 const express = require('express') const {v4:uuidv4}=require('uuid') const bcrypt =require('bcrypt') const jwt =require('jsonwebtoken') const cors=require('cors') const {MongoClie ...

javascriptnode.jsreactjsmernreact-fullstack

A guide on specifying the data type for functions that receive input from React Child components in TypeScript

Currently, I am faced with the task of determining the appropriate type for a function that I have created in a Parent Component to retrieve data from my Child Component. Initially, I resorted to using type: any as a solution, although it was not the corr ...

reactjstypescripttypes

An array containing multiple arrays in JSon format

I am currently working on creating a JSon document along with its corresponding xsd file to generate JAXB classes, and I'm not entirely sure if I am doing it correctly. The structure I aim to achieve is as follows: team -name="name" -game="game ...

javaarraysjsonjaxbxsd

Tips for managing blur events to execute personalized logic within Formik

I am currently delving into the world of React/Next.js, Formik, and Yup. My goal is to make an API call to the database upon blurring out of an input field. This call will fetch some data, perform database-level validation, and populate the next input fiel ...

javascriptreactjsnext.jsformikyup

Is there a way to eliminate the number spinner in Angular specifically for certain input fields?

I am facing an issue where I need to remove the numeric spinner from only a few selected inputs. By adding the following code snippet to my styles.scss file, I was able to successfully remove the spinner: /* Chrome, Safari, Edge, Opera */ input[matinput]: ...

cssangularangular-material

The functionality of the Regions plugin in wavesurfer.js appears to be completely nonfunctional

I've been attempting to utilize the Regions plugin from wavesurfer.js, but unfortunately, it's not functioning as expected. Despite trying various methods suggested on different websites, I have yet to achieve success. Below is the snippet of c ...

javascripthtmlpluginswaveformwavesurfer.js

Error encountered in typescript when trying to implement the Material UI theme.palette.type

Just starting out with Material UI and TypeScript, any tips for a newcomer like me? P.S. I'm sorry if my question formatting isn't quite right, this is my first time on Stack Overflow. https://i.stack.imgur.com/CIOEl.jpg https://i.stack.imgur.co ...

reactjstypescriptmaterial-ui

Unlocking the Count of ng-repeat Elements in Angular JS 1

I'm curious about how to obtain the count of items in ng-repeat using AngularJS. In this particular code, I'm interested in finding out the count of "skill" because I want to set a limit on it. If the count of skills exceeds 5, I only want to dis ...

javascriptangularjsangularjs-ng-repeat

AngularJS: Issue with scope not updating across several views

Having one controller and two views presents a challenge. ClustersController angular.module('app.controllers').controller('ClustersController', [ '$scope', 'ClustersService', function($scope, ClustersService) { ...

javascripthtmlangularjsdata-binding

Having trouble with the copy to clipboard function of Prism JS on my NextJs application

I am facing an issue while trying to integrate a copy to clipboard plugin from prismjs into my next.js app. I have searched for documentation on this but couldn't find any relevant information. Despite going through various websites and implementing t ...

javascriptnext.jsprismjs

Using Vuelidate with Vue 3, vue-class-component, and TypeScript combination

Is there anyone who has successfully implemented Vuelidate with Vue 3 using the Composition API? Although Vuelidate is still in alpha for Vue 3, I believe that if it works with the Composition API, there must be a way to make it work with classes as well. ...

typescriptvue.jsvuelidatevue-class-components