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?

javascriptangularjsngtable

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

Send back alternate HTML content if the request is not made via AJAX

Last time I asked this question, I received several negative responses. This time, I will try to be more clear. Here is the structure of a website: Mainpage (Containing all resources and scripts) All Other pages (HTML only consists of elements of that ...

javascriptphpjqueryhtmlajax

Transform a group of objects in Typescript into a new object with a modified structure

Struggling to figure out how to modify the return value of reduce without resorting to clunky type assertions. Take this snippet for example: const list: Array<Record<string, string | number>> = [ { resourceName: "a", usage: ...

javascripttypescript

Transitioning away from bundled Javascript for local debugging

My current tasks on the gulpfile.js for my frontend app involve a serve task that handles the following: Processing less files Bundling all javascripts into dist/bundle.js Uglifying dist/bundle.js However, this setup made local debugging difficult. To a ...

javascriptnpmgulp

What is the best way to execute a JavaScript function using Python Selenium?

Is it possible to repeatedly call the MapITRFtoWgs84() function with input from a text file and save the output to another text file? I believe Selenium might be the right tool for this task. Could you provide guidance on how to achieve this? Attached is ...

javascriptseleniumselenium-webdriverselenium-chromedrivergoogle-chrome-devtools

Keep the first column of an HTML table fixed as you scroll horizontally

Below is an HTML table that I have created: <table id="customers" class="table table-bordered" width="100%"> <thead> <tr> <th colspan="2">Activities</th> <th>Mon 17</th> <th>Tue 18</th> </thead> ...

javascripthtmlcss

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

React date format error: RangeError - Time value is invalid

I'm utilizing a date in my React app using the following code: const messageDate = new Date(Date.parse(createdDate)) const options = { month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric' } as const ...

javascriptreactjs

Am I on the right track with my service definition in Angular?

(function(){ angular.module('myApp',[]) })(); (function(){ angular.module('myApp.dashboard',[]) })(); (function(){ angular.module('myApp.value',[]) })(); (function(){ 'use strict'; angular.modu ...

javascriptangularjs

Grab the URL from React Router

I need assistance with writing a function that updates the current location to match the route of a clicked button. Currently, the code is returning the URL of the page where the button was clicked, not the path related to the button itself. Are there an ...

javascriptreactjsreact-hooksreact-router

The issue of receiving a 500 error when making a POST request in node.js

I have created my own unique REST API that utilizes an NLP API internally. I need to post data on their URL, but unfortunately I am encountering an error that is causing my API to return a 500 error to the frontend. Below is a snippet of my server.js code ...

javascriptnode.jsexpressneedle.js

Implementing Vuejs sorting feature post rendering

Currently, I have elements linked to @click event listeners. <th @click="sort('dateadded')" class="created_at">Date Added I am looking for a way to automatically trigger this sorting function when the Vue.js component renders, so that th ...

javascriptvue.jslodashvuejs2

Tips for retrieving document body from a script embedded within document.write

I urgently need assistance! I am currently developing an application that retrieves a report from an API, and the JSON response includes HTML content. Unfortunately, due to the JSON format, I cannot directly open this in a new browser window. Within my sc ...

javascriptdomdocument-body

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

javascriptjqueryhtmlcss

Cross-domain scripting with JavaScript

I currently manage 2 subdomains securityservices.example.com workstations.example.com All workstations are associated with the workstations.example.com One of the workstations, known as WS789012 on the domain, is fully qualified as: WS789012.workst ...

javascripthtmlajax

Automatically trigger a popup box to appear following an AJAX request

I am currently working on a time counter script that triggers a code execution through ajax upon completion. The result of the code should be displayed in a popup box. Below is the code snippet I am using: var ticker = function() { counter--; var t = ...

javascriptjqueryajax

What is the syntax for populating an attribute on the same line as v-for in Vue.js?

I am currently working on a simple loop utilizing Vue to iterate over an array of objects and populate table rows. <tr v-for="user in users"> <td>{user.name}</td> <td>{user.id}</td> </tr> However, I also need to as ...

javascriptvue.js

Retrieve the 90 days leading up to the current date using JavaScript

I've been searching for a way to create an array of the 90 days before today, but I haven't found a solution on StackOverflow or Google. const now = new Date(); const daysBefore = now.setDate(priorDate.getDate() - 90); The result I'm looki ...

javascriptarraystypescript

What is the best way to keep calling an AJAX function until it receives a response from a previous AJAX call

I am looking to continuously call my ajax function until the previous ajax call receives a response. Currently, the page is loading every second and triggering the ajax function, but I want it to keep calling the ajax function until the previous one has c ...

javascriptphpjqueryajax

When you click, you will be directed to the specific details of the object

I have a recipe component that displays a list of recipes from my database and a recipe-detail component that should show the details of a selected recipe. What I aim to achieve is that when someone clicks on a recipe name, they are routed to the recipe-de ...

javascripthtmlangulartypescriptrxjs

Angular proxy - Syntax error found in proxy configuration file: proxy.conf.json

My Angular 6 setup is configured to make HttpRequests, but I encountered a problem that requires me to run them through a proxy. To address this issue, I created a proxy.conf.json file next to my package.json: { "/loans/": { "target" : "https://api. ...

javascriptjsonangularproxyunexpected-token