Troubleshooting problem with nested object in AngularJS data table

For my project, I am utilizing an angular js datatable and currently trying to access the following object:

       "finalizedArr":[ 
      { 
         "treaceId":"KYC454353545", 
         "approval":[   
            {   
               "usr":"kalindu kumara",  
               "threshold":100  
            },  
            {   
               "usr":"kuma kalil",  
               "threshold":80   
            },  
]}
]

In order to generate a table, I am using the code sample below as the main part of the code:

   $scope.dtColumns = [
    DTColumnBuilder.newColumn('traceId').withTitle('Trace ID'),
    DTColumnBuilder.newColumn('approval.usr').withTitle('Name'),
    DTColumnBuilder.newColumn('approval.threshold').withTitle('Match Strength %')
];

Although the 'traceId' column is correctly rendered in the table, the 'usr' and 'threshold' columns are not displayed. It seems that the issue lies with them being inside an array, but I'm unsure how to modify this. Could you please check my problem?

Answer №1

By default, ngTable dynamic functionality expects the column.field to be property names, not nested objects. This means it doesn't support dot syntax like oneProperty.anotherProperty and instead treats it as

columnObject["fieldNameYouProvided"]
).

If you encounter this issue, you can explore a solution similar to the one mentioned here, or consider mapping your data model to a flat object.

Also note that using approval.usr and approval.threshold as column fields won't work for arrays. Instead, you should access these values as approval[0].usr and approval[0].threshold if approval is an array in your data model.

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

Tax calculator that combines item prices and applies tax multiplication

Struggling to crack the code for my calculator. Despite consulting my textbook, I can't seem to figure out why it won't calculate properly. Any advice or tips would be greatly appreciated. <html> <head> <title> Total Calculator ...

Aligning divs, prevent duplicate HTML within multiple divs

Currently, I am attempting to troubleshoot a jsfiddle issue. The main problem lies in my desire for the first two divs (with class="fbox") to be aligned next to each other on the same level. Furthermore, I am looking to enable dragging the image into the ...

Display a div using data from a Model in MVC

I am working with a model List that has fields ContainerId (div id) and Code (HTML code), which I am passing to a Razor View. Can you suggest the most effective way to display the code from the model in the containerId? My initial thought is to utilize j ...

What is the most efficient way to incorporate MongoDB into your codebase using ES6-style

I have encountered an issue with importing MongoDB using the es6 import-from style. When I try to import using node's require method, everything works fine. let mongo = require('mongodb'); let MongoClient = mongo.MongoClient; However, when ...

A guide on developing an AngularJS SVG directive

I'm attempting to develop an angular directive using version 1.5.5, where the template consists of an svg element. Despite reading through this solution and various others, I'm encountering difficulties in displaying my basic svg element. I' ...

Effortless Registration and Authentication using Ionic with Firebase

Recently, I embarked on my journey to learn Ionic. I'm seeking some guidance on how to incorporate Login and Sign-up features using Firebase in Ionic. Any assistance would be greatly appreciated! ...

The Angular 2 service is not transmitting the POST data in the correct format, although it functions properly when transmitted through PostMan

When the POST data is transmitted from the Angular 2 service in this manner: const data = new FormData(); data.append('date', '12/01'); data.append('weight', '170'); return this.http.post(this.u ...

How can I dynamically assign a className in a React component based on the current state when importing styles?

I've been utilizing the style-loader to insert CSS modularly into my components ({style.exampleClassName}). My goal is to showcase a loader for a specific duration before displaying an image (at least 16 of these components in a grid layout). This i ...

"I'm encountering an issue with the discord.js module when I try to launch my bot using node. Any ideas on how

I encountered an unusual error with my Discord bot recently. It seems that discord.js crashes every time I try to run my bot: [nodemon] 2.0.12 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: js,mj ...

Creating dynamic components with constructor parameters in Angular 9

Having trouble passing a value to the constructor in the component generation code. Check out the original code here: https://stackblitz.com/edit/angular-ivy-tcejuo private addComponent(template: string) { class TemplateComponent { @ViewChild( ...

Toggle the visibility of tooltips based on a condition with uib-tooltip

I am looking for a way to toggle the functionality of a tooltip on a button. I attempted to disable it with the following code snippet: <button type="button" uib-tooltip="test" tooltip-is-open="false"> </button> However, the tooltip stil ...

The definition of require is missing in the MEAN stack node

Currently experimenting with building an application on the MEAN stack and encountered a hurdle involving the use of Node's require function. Here is my current project structure: -- app -- images -- scripts -- app.js // configuration fi ...

Could this be a problem with synchronization? Utilizing Google Translate to link-translate terms

Trying to create a script that will show how a word changes through multiple translations using Google Translate, but struggling with Javascript. The problem I'm facing is hard to pinpoint: function initialize() { var word = "Hello"; var engl ...

What is the best way to find the average time in Typescript?

I am dealing with an object that contains the following properties: numberOfReturns: number = 0; returns_explanations: string [] = []; departure_time: string = ''; arrival_time: string = ''; The departure_time property hold ...

The functionality of removing a class on the body element is ineffective when using pagepiling.js

After creating a website using pagepiling.js, I implemented a script that adds the 'active' class to the section currently in view. My goal was to add a specific class to the body when my section1 is considered active. Here's the initial app ...

Issue with NPM's manual review process following recent package updates

Upon downloading node-sass, I encountered the following warning message: "found 9 vulnerabilities (4 moderate, 5 high) in 1869 scanned packages. 9 vulnerabilities require manual review. See the full report for details." Despite attempting to manually insta ...

Store the information from an AJAX post request in a div element into the browser

I've set up a datatable with a button that posts data into a div. Below is the HTML code I used: HTML : <div class="card-body"> <div class="overlay" id="kt_datatable_nodata"> <div class="o ...

Issue with Electron dialog.showOpenDialog() Filters malfunctioning

Recently, I've been working on a modified version of an IDE on GitHub and encountered a major issue where the files were being saved to cookies instead of the computer. This prompted me to find a way to save and open files efficiently. While I managed ...

What is the best way to prematurely exit an outer function when there are multiple inner non-blocking function calls?

For the purpose of learning, I am working on creating a basic version of async.parallel. The description from the documentation is as follows: parallel(tasks, [callback]) Run the tasks array of functions in parallel, without waiting until the previou ...

I would like to know the method for inserting an HTML element in between the opening and closing tags of another HTML element using

Recently, I came across a coding challenge involving a textbox. <input type="text></input> The task was to insert a new span element between the input tags using jQuery, as shown below: <input type="text><span>New span element< ...