How to update data in AngularJS grid component using ng-bind directive

As a newcomer to AngularJS, I'm facing an issue that I need help with.

Here's my problem: I have an ng-grid connected to a table. Inside the grid, there are values along with an ID (which is a foreign key from another table). Instead of displaying the ID, I want to show another field from this foreign table.

CompanyFactory.getCompanies().success(function (data) { $scope.objs = data })

  $scope.gridOptions = {
        data: 'objs',
        showGroupPanel: true,
        jqueryUIDraggable: true,
        columnDefs: [
              { field: 'COMP_NAME', displayName: 'comp_name'},
              { field: 'COUNTRY', displayName: 'country' },
              { field: 'LU_SECTOR_ID', displayName: 'sector', },
            ]

    };

I'm looking for a way to display the sector_name field instead of the sector_ID field. How can I establish the relationship between these two tables?

 $scope.countries = [
            { COMP_NAME: 'KOLI', COUNTRY: 'KOLI_COUNTRY', LU_SECTOR_ID: '1'},
            { COMP_NAME: 'ZOLI', COUNTRY: 'ZOLI_COUNTRY', LU_SECTOR_ID: '2'},
            { COMP_NAME: 'TULI', COUNTRY: 'TULI_COUNTRY', LU_SECTOR_ID: '3'},

        ];

 $scope.sector= [
            { LU_SECTOR_ID: '1', LU_SECTOR_NAME: 'SECTOR_1'},
            { LU_SECTOR_ID: '2', LU_SECTOR_NAME: 'SECTOR_2'},
            { LU_SECTOR_ID: '3', LU_SECTOR_NAME: 'SECTOR_3'},

        ];

In the ng-grid, I would like to display the SECTOR NAME instead of the SECTOR_ID.

javascriptangularjsng-grid

Answer №1

Without the necessary information from the data object, it's challenging to provide a definitive answer.

Let's consider a scenario where the CompanyFactory returns a data object like this:

[
    {
       "COMP_NAME": "Tomms",
       "COUNTRY": "France",
       "LU_SECTOR_ID": "9",

       "SECTOR": { "SECTOR_NAME": "IT" }
    }
]

To properly bind the correct field, follow these instructions:

$scope.gridOptions = {
    data: 'objs',
    showGroupPanel: true,
    jqueryUIDraggable: true,
    columnDefs: [
          { field: 'COMP_NAME', displayName: 'comp_name'},
          { field: 'COUNTRY', displayName: 'country' },

          // Ensure accuracy here
          { field: 'SECTOR.SECTOR_NAME', displayName: 'sector', },
        ]

};

If the objects are returned separately, manual linking will be required. It is recommended to handle this on the server side to simplify the process, following the example provided above.

Answer №2

We've encountered an issue.

{ field: 'LU_SECTOR_ID', displayName: 'sector', }

More precisely 

LU_SECTOR_ID

You should update the variable's name to match the object names, not the IDs

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 implementing Autocomplete in JsHelper?

Is it possible to create an Ajax Autocomplete using only pure JsHelper in JavaScript? Thank you, Celso ...

javascriptajaxcakephpautocomplete

Is it possible to create two separate Express sessions simultaneously?

I am encountering an issue with my Passport-using application that has a GraphQL endpoint and a /logout endpoint. Strangely, when I check request.isAuthenticated() inside the GraphQL endpoint, it returns true, but in the /logout endpoint, it returns false. ...

javascriptexpresspassport.jsexpress-session

Issues with Rock Paper Scissors Array in Discord.js V12 not functioning as expected

I'm currently working on implementing an RPS game in my Discord bot. I want to create a feature where if the choice made by the user doesn't match any of the options in the list, it will display an error message. Here is the code snippet that I h ...

javascriptnode.jsdiscord.js

Can HTML be transferred between browser tabs using Angular?

I'm in the process of developing a unique Angular (v17) application that allows users to drag and drop HTML elements, even across multiple browser tabs. I am inspired by the capabilities demonstrated by neo.mjs, as shown in this demo: https://www.yout ...

javascripthtmlangulardrag-and-drop

Leveraging Selenium to dismiss a browser pop-up

While scraping data from Investing.com, I encountered a pop-up on the website. Despite searching for a clickable button within the elements, I couldn't locate anything suitable. On the element page, all I could find related to the 'X' to cl ...

javascriptpythonseleniumweb-scrapingbeautifulsoup

There seems to be an issue with the HighCharts chart export feature as it is not showing the Navigator graph

We are currently using HighCharts version 4.2.2 http://api.highcharts.com/highcharts/exporting While going through their exporting documentation, I made a decision to not utilize their default menu dropdown. Instead, I only needed access to the .exportCh ...

javascriptangularjschartshighchartshighcharts-ng

I am working with Vue.js 2.0 and attempting to send an event from a `child component`

I've been working with Vue.js 2.0 and I'm facing an issue trying to emit an event from a child component to the parent component, but unfortunately, it's not functioning as expected. Here is a glimpse of my code: child component: <temp ...

javascriptvue.jsemit

Ways to implement ng-show without using attributes

Is there a way to centrally add ng-show to elements in multiple places within my codebase for hiding them? Instead of individually adding ng-show in each template like this: <tr my-row ng-show="$ctrl.model.toShow()"></tr> We can simplify it ...

angularjs

Encountered an issue while implementing the post function in the REST API

Every time I attempt to utilize the post function for my express rest API, I encounter errors like the following. events.js:85 throw er; // Unhandled 'error' event ^ error: column "newuser" does not exist at Connection.parseE (/Use ...

javascripthtmlnode.jsapiexpress

Limiting the displayed portion of a table and implementing scrolling instead

I am currently working with a static HTML template that contains the following code: <table> <thead></thead> <tbody></tbody> </table> Using jQuery and AJAX, I am dynamically adding and removing rows and columns ...

javascriptajaxhtml

Having trouble getting AngularJs ng-repeat to function properly when using multiple items in ng-init?

Just getting started with AngularJs and running into an issue with ng-init and ng-repeat in the example I'm working on. Below is a snippet from my code within the body section: <div ng-app="" ng-init="books=[ {title:'Pride and Prejudice&a ...

angularjs

What is the best way to properly format letters with accents (such as French letters)?

I have encountered a challenge where I created a PHP file to display French text and then utilized this text in an AJAX file (specifically the responseText). The issue arises when trying to show the French responseText in an alert using JavaScript, as ac ...

phpjavascriptajax

Finding the Client's Private IP Address in React or Node.js: A Comprehensive Guide

Issue I am currently facing the challenge of comparing the user's private IP with the certificate's IP. Is there a method available to retrieve the user's private IP in react or node? Attempted Solution After attempting to find the user&a ...

javascriptnode.jsreactjsip

Detecting Scroll on Window for Specific Element using Jquery

I need help troubleshooting my code. I am trying to activate only one item that comes from the bottom of the page, but instead all div elements are getting activated. $(window).scroll(function() { $('.parallax').each(function(e) { if($( ...

javascriptjqueryparallax.js

Slider that allows range selection after midday

Currently facing a dilemma using the noUiSlider plugin. I have set up a time range picker starting from 6 am to 6 am the following day. Everything works smoothly until it reaches 23:59, but I need it to display 1:00, 2:00 instead of 25:00, 26:00 for the ...

javascriptjqueryhtmlnouislider

Arranging a collection of objects (Displaying information in a random sequence)

Here is a summary of the data returned in a shortened version: var array = [{ "response": { "itineraries":[ { "price": { "totalPricePerPassenger":"104" ...

javascriptarrayssortingobject

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

My current task involves sending the same query to multiple identical endpoints (about five) across various Kubernetes clusters. The goal is to aggregate the results without any delays and report failures to the user while continuing with the process seaml ...

javascripttypescriptpromisecancellation

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth

Currently, I am developing a web application that utilizes the Spotify API. My goal is to seamlessly load the user's playlists as soon as they log in using NextAuth. At the moment, there is a button implemented to trigger playlist loading, but it onl ...

javascriptreactjsreduxnext.jsnext-auth

reversed json using javascript

Is it possible to efficiently reverse the order of the following JSON object: { "10": "..." "11": "...", "12": "...", "13": "...", "14": "...", } so that it becomes: { "14": "...", "13": "...", "12": "...", "11": "... ...

javascriptjqueryjsonreverse

Can a single button click be shared across multiple forms?

The main concept involves a grid where when a user double-clicks on a row, a modal window (Bootstrap panel) opens with a panel-body section for editing the data and a panel-footer containing a btn-group for actions like "Save", "Cancel", or "Close". This s ...

javascriptjqueryasp.net-mvc-4