Looking to display information in a column-by-column format using ng-grid within Angular JS

The data I have is structured like this:

$scope.myStudentData = {"Moroni":{"id":"1","grade":"A"},"Tiancum":{"id":"2","grade":"B"}}

However, the grid requires a different format:

$scope.myGridOptions = [{"details":"id", "Moroni":"1", "Tiancum":"2"},{"details":"grade", "Moroni":"A", "Tiancum":"B"}];

This discrepancy exists because ng-grid-options expects rows. Is there a way to display the grid column-wise without transforming the data into the expected format?

Note: I need to maintain angular two-way binding for some derived fields and cannot alter the data structure specifically for the grid.
javascriptjsonangularjsng-grid

Answer №1

Yes, it is possible to achieve this.

$scope.tableSettings = {
        data: userList,
        columnConfig: [
            {field: 'id', displayName: 'User ID'},
            {field: 'lastName', displayName: 'Last Name'},
            {field: 'firstName', displayName: 'First Name'},
            {field: 'email', displayName: 'Email Address'},
            {field: 'phone', displayName: 'Phone Number'}

    };

Then simply use:

<div ui-table="tableSettings"></div>

In the above code snippet, ensure that userList represents your array of objects and the column definitions specify the columns you wish to display. The fields in the column definitions should match the keys in your object.

For detailed information on the gridOptions API, visit the documentation here.

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

Encountering the [$injector:modulerr] Error repeatedly in your AngularJS application

As I dive into the phoneCat tutorial, I decided to create a similar structured app. However, I am encountering an error message "$injector:modulerr" when trying to include a module that I created. files are arranged like this I initially started my app u ...

angularjs

Assigning a value to an attribute as either a "string" or null within JSON Schema while specifying a maximum length

I'm currently working on crafting a JSON schema that supports a nullable attribute. I am aiming to have the ability for specific JSON structures like this one be considered valid: { "some_name" : null } This is how my schema looks like: { "type" ...

javascriptjsonjsonschemajson-schema-validator

In React Native, I must include individual radio buttons for each item retrieved from the API

When I select a radio button on mobile, all radio buttons get selected instead of just the one clicked. Here is the current behavior: https://i.stack.imgur.com/qRJqV.jpg The expected behavior is to have only the clicked radio button selected, like in thi ...

javascriptreactjsarraysreact-native

Condition formulation using dynamic dust JS equality

I'm struggling with a seemingly simple task - dynamically changing the @eq condition. The example provided shows a default render, but what I really need is to allow user input to change it to either "Larry" or "Moe". You can view my code on jsfiddle ...

javascriptjqueryparametersdust.js

Retrieve request body/header variables in JWT strategy using Nest JS

Is there a way to retrieve the header variables or request body in a strategy? The JWT structure within the JwtStrategy currently appears as follows: @Injectable() export class JwtStrategy extends PassportStrategy(Strategy) { constructor( private re ...

javascripttypescriptgraphqlnestjs

Having difficulty sending a value with %45 to a REST API

Currently, I'm encountering an issue within my ASP.NET MVC 5 application. The problem arises when I send the following JSON data to a third-party API, which includes a password field: "{\"operation\":{\"Details\":{\"RESOURCE ...

c#htmlasp.netjsonjson.net

How can I access an InputStream from a local XML file in a PhoneGap application?

Looking for advice on how to fetch an inputstream from a local XML file using JavaScript in my PhoneGap application. I'm new to JavaScript, so any guidance would be appreciated! ...

javascripthtmlcordova

Tips for customizing the appearance of a single plot within a time series chart using FusionCharts or FusionTime

I've implemented a time series line graph using FusionCharts in the following code snippet: const MyChart = () => { const schema = [ { name: "Category", type: "string" }, { ...

javascriptreactjsfusionchartsreact-fusioncharts

What is the method for extracting information from a JSON file?

Hello there, I am facing an issue with retrieving data from a JSON file. Previously, the format of the JSON data looked like this: {"country":"US","Money":"Dollars US"} In order to extract the result, I used the following code in my inner class called A ...

androidjsonkotlin

having trouble with npm installation of firebase-tools

I am encountering an issue while attempting to set up firebase-tools for my android studio project. Here is the error message that I am facing: Microsoft Windows [Version 10.0.15063] (c) 2017 Microsoft Corporation. All rights reserved. C:\WINDOWS&bs ...

javascriptnode.jsnpm

Clicking on the image "Nav" will load the div into the designated target and set its display to none. The div will

Can someone help me with loading a div into a target from an onclick using image navigation? I also need to hide the inactive divs, ensuring that only the 1st div is initially loaded when the page loads. I've tried searching for a solution but haven&a ...

javascripthtmljquery

Tips for speeding up page loading when using the same image multiple times on a page

Is it possible to utilize a JavaScript Image object? If yes, could you provide an illustrative example? And is it feasible to achieve this with jQuery? ...

javascriptjqueryhtmlimage

Passing data to an Angular directive

I am facing an issue while trying to pass information through a view in a directive. Despite binding the scope, I keep seeing the string value 'site._id' instead of the actual value. Below is the code for the directive: angular.module('app ...

javascriptangularjs

Struggling to overcome the symbol error for JSONArray while using Java in IntelliJ?

My Pom file in IntelliJ (Maven) includes the following code: <dependency> <groupId>com.googlecode.json-simple</groupId> <artifactId>json-simple</artifactId> <version>1.1</version> ...

arraysjsonintellij-ideamaven-plugin

I would like to retrieve an array of objects containing state and count information from this data in ReactJS

I have a dataset stored in an array of objects as follows [{name,state},{name,state},{name,state},{name,state},{name,state}]. I am interested in extracting the state data along with the number of people belonging to each state. To achieve this, I would l ...

javascriptnode.jsreactjs

Choosing between cjs and esm for a React components library

I'm working on a components library that will soon be published to npm for use in a razzle app. My main query revolves around the best practices for building these packages - should they be built with CommonJS (cjs) or ECMAScript Modules (esm)? And wh ...

javascriptnode.jsnpmcommonjses6-modules

Why won't my picture track the movement of the cursor?

I am trying to make my image follow the cursor using a specific code, but it doesn't seem to be working. I'm having trouble figuring out what's wrong with it. Here is the code snippet that I'm currently using: function followIt(e) ...

javascripthtmlcssdom-events

Problem with Submitting Form using Search Bar

I've tried everything, but I can't seem to get this search form to submit. <div id="search_bar_container" style="z-index:99999"> <div class="container"> <form action="tour-list-search-results.php" method="post" name="searc ...

javascripthtmlcss

Is the $http call for OPTIONS instead of POST?

Hey there, I'm encountering a strange issue while trying to call my backend using the POST method. Remote Address:192.168.58.183:80 Request URL:http://192.168.58.183/ESService/ESService.svc/CreateNewAccount Request Method:OPTIONS Status Code:405 Meth ...

javascriptangularjshttpionic-framework

Converting a JSON object back to a `Person` object in Java

I'm having trouble converting a JSON object back to a Person object in Java. I keep getting the error java.lang.IllegalStateException: Expected BEGIN_OBJECT but was STRING at path $ Here is an example of the JSON file: { "type":"set& ...

javajsongson