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

What is the process for injecting dependencies in a custom Angular class?

I am facing an issue with my Angular service setup: @Injectable({ providedIn: 'root', }) export class Services { public service1 = new Service1(); } The Service1 class looks like this: export class Service1 { public http: HttpRequ ...

angularangular8

Error message: Unexpected character found at the beginning of JSON data - REST API using node.js and Express

Recently, I have embarked on the journey of learning REST API with node and express. My main goal is to achieve file read and write operations using APIs. However, a frustrating error arises when attempting to hit the API through Postman. Strangely enough, ...

javascriptnode.jsjsonrestexpress

What is the best way to transmit a response using JSON instead of Jade?

//This is the code in my index.js file var express = require('express'); var router = express.Router(); /* Display the home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Movie Datab ...

javascriptjsonnode.jsexpress

Disabling Navigation with Arrow Keys in Prettyphoto

Is there a way to prevent arrow keys from functioning in PrettyPhoto for a specific instance? I have tried using keyboard_shortcuts:false, but it still reloads the frame if left or right arrow keys are pressed, causing the form inside to reset. However, co ...

javascriptjquerykeyboard-shortcutsprettyphoto

Ways to conceal the picture

Check out the JSfiddle link here for the full code. I'm having trouble with my slider as the last picture keeps collapsing underneath and is not hidden as it should be. I suspect this issue is causing the slider to malfunction. HTML <div class=" ...

javascriptjqueryhtmlcss

Not receiving connections on localhost port 3000

Our team has successfully created a basic Express Node website https://i.stack.imgur.com/5fwmC.png We attempted to run the app using DEBUG=express_example:* npm start https://i.stack.imgur.com/NI5lR.png We also tried running it with node DEBUG=express_ ...

javascriptnode.jswindowsexpressnpm

What methods can users employ to effectively manage and maintain their in-app purchases using my application?

Hey there, I could really use some assistance. Recently, I created a mobile app for a client that allows users to purchase and watch video courses. However, I'm facing an issue where when a user buys a course and then refreshes the app, they are redir ...

javascriptjqueryhtml

Hiding Div with JavaScript (Quick and Easy)

Hey there, I'm looking to make regStart and regPage alternate visibility based on a click event. I'm still getting the hang of JavaScript so any simple answers would be appreciated. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/x ...

javascripthtml

Adjust the size of the image obtained from the JSON data

I am currently working on parsing JSON data which includes an image field that I want to adjust to a specific size. Despite my many attempts at tweaking the code, I seem to have lost track of why it is not functioning as desired. JSON var items=[]; ...

cssjson

What is the purpose of using the variable "header_row || 1" in App Script?

Recently, I stumbled upon a spreadsheet that contains app script for gathering keys of data requested through doGet. In the code, there is a line that reads like this: var headRow = e.parameter.header_row || 1; What exactly does this line mean? I searc ...

javascriptgoogle-apps-script

Stop RequireJS from Storing Required Scripts in Cache

It seems that RequireJS has an internal caching mechanism for required JavaScript files. Whenever a change is made to one of the required files, renaming the file is necessary in order for the changes to take effect. The typical method of adding a version ...

javascriptjqueryrequirejs

Typescript Error: lib.d.ts file not found

Recently, I experimented with Typescript and utilized the Set data structure in this manner: var myset = new Set<string>(); I was pleasantly surprised that there was no need for additional libraries in Typescript, and the code worked smoothly. Howe ...

javascriptvisual-studiointernet-explorertypescript

I encountered a "ReferenceError: db is not defined" while trying to call a function in Express.js with MongoDB intergr

The structure of the code is as follows: var express = require('express'); var router = express.Router(); var mongo = require('mongodb').MongoClient; function getData(){ db.collection("collection_name").find({}).toArray(function (er ...

javascriptnode.jsmongodbexpress

JavaScript encounters an error when trying to create a MarkLogic instance with an array

[javascript] XDMP-CAST: (err:FORG0001) xs:string#1(.) -- Invalid cast: `json:object(<json:object xmlns:xs="http://www.w3.org/2001/XMLSchema" ` xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" .../>) cast as xs:string Stack Tr ...

javascriptentitymarklogic

Deactivate JQuery star rating plugin after user has voted

I've integrated the JQuery star rating plugin (v2.61) from into my project. Everything is working smoothly, but I am looking for a way to disable the stars once a user has voted. Currently, users are able to select their rating and submit it through ...

javascriptjqueryajaxjquery-plugins

Is your current Angular 2 project in need of data retrieval from a SQL server?

Currently, I am facing a challenge with my Angular 2 application as I am unable to connect and send queries to an existing SQL server. It has come to my attention that in order to achieve this, I need to create a RESTful API using 'express.js'. I ...

node.jsangularexpress

It never fails to function automatically, no matter which script is being executed

By default, the script will always be executed regardless of its environment. Check out my code snippet: import { Pool } from 'pg'; import config from './../config'; const connectionString = () => { switch (process.env.NODE_EN ...

javascriptnode.js

Tips for managing the most recent keyup event in a search feature

I have a search input on my website. Whenever a user types a letter in it, an ajax request is made to display some content as the result. My goal is to only create an ajax request for the last keyup event when the user types quickly. I came across a soluti ...

javascriptjqueryajax

When working with Angular 2 and Typescript, a common error message that may be encountered is "TypeError

Currently diving into Angular 2 and encountered a stumbling block while attempting to create a service. Despite my efforts in finding a solution, I seem to be missing something crucial. Error: A problem arises in angular2-polyfills.js:1243 with the error ...

javascriptangularjstypescriptangular

Angular: utilizing two instances of the <router-outlet> within a single component

Disclaimer: Despite finding a similar question on Stack Overflow with an accepted answer that did not solve my issue, I am still facing a problem. The challenge I am encountering is needing to use the same "router-outlet" twice in my main component. Howev ...

angular