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

Function to save prices as cent-based figures in Javascript using Regex

Trying to extract prices from a string using regex can be tricky, as unexpected issues may arise. For example, obtaining the following values: US$1234.56 $12 $12.34usd $0.56 .56 dollars and converting them to: 123456 1200 1234 56 56 is necessary for s ...

javascriptregex

"Enhance your website's tracking capabilities by integrating jQuery with

Last week, everything was working perfectly fine and I hadn't made any changes to the code or settings. The google analytics javascript file is loaded using the .htaccess file, ensuring it is consistently used for all pages without any issues. However ...

javascriptjquery.htaccessgoogle-analytics

Which programming language is more suitable for developing a chat website - PHP or JSP?

My goal is to create a web-based chat application similar to Yahoo's, utilizing JSP/PHP with AJAX. I'm debating between using JSP or PHP for this project and looking for the advantages and disadvantages of each. Which do you think would be bette ...

javaphpjavascriptajaxjsp

Utilizing arrays in JavaScript alongside jQuery's methods such as $.inArray() and .splice()

I am currently dealing with an array that is limited to containing 12 values, ranging from 1 to 12. These values can be in any order within the array. My task is to iterate through the array and identify the first unused value, assigning it to a variable. ...

javascriptjqueryarrays

What steps should I take to resolve the error: Uncaught SyntaxError: expected expression, received '<'?

I'm facing an issue with my code. It works perfectly on my computer, but when I move it to the server, I encounter the following error. Error: Uncaught SyntaxError: expected expression, got '<' Here is the code snippet causing the prob ...

javascriptjsonsyntaxxmlhttprequest

I keep encountering the following error message: " ERROR Error Code: 200 Message: Http failure during parsing for http://localhost:3000/login"

My Angular Login component is responsible for passing form data to the OnSubmit method. The goal is to send form data from the front-end application and authenticate users based on matching usernames and passwords in a MySQL database. ***This login form i ...

javascriptnode.jsjsonangulartypescript

Field cannot be submitted without the required input after an Ajax request

I want to ensure that all my text/email input forms require a submission before you can "Submit" the email. Unfortunately, when using Ajax to prevent the page from refreshing after pressing the button, the required attribute does not function properly. T ...

javascriptjqueryhtmlajax

Updating all the direct components within the corresponding category with jQuery

Here is the HTML content I am working with: <li class="info"> info<li> <li class="other"> info<li> <li class="other"> info<li> <li class="Error"> error<li> <li class="other"> error<li> < ...

javascriptjqueryhtmlcss

Using Codeigniter to fetch a PHP array in an AJAX success callback

I have implemented a jQuery script to send the value selected from a dropdown menu to my controller. The controller then calls a function in my model to execute a query using this value, and retrieve an array of results from the database. These results are ...

javascriptphpjqueryajaxcodeigniter

Exploring the $scope variable in AngularJS using JavaScript

How can I assign values to $scope.dragged and $scope.dropped in a JavaScript function? function drag(e){ e.dataTransfer.setData("text/html", e.target.id); console.log(e.target.id); $scope.dragged = e.target.className; } function drop(e){ ...

javascriptangularjsscopeset

Updating the status of a checkbox array within the reducer to reflect changes made in the user interface

I've implemented something similar in React: const CheckboxItems = (t) => [ { checked: true, value: 'itemsCancelled', id: 'checkBoxItemsCancelled', labelText: t('cancellations.checkBoxItemsCancelled&apos ...

javascriptreactjsecmascript-6redux

Uniting the client-side jQuery and server-side Express for enhanced functionality

Currently, I am deepening my understanding of Express/Node. My goal is to construct a basic HTML form that undergoes client-side validation (using jQuery/AJAX) while also being processed server-side (via Express.js). The application's complexity remai ...

javascriptjquerynode.jsformsexpress

Having difficulty incorporating TypeScript into Vue

A little while ago, I set up a vue project using vue init webpack . and everything was running smoothly. Recently, I decided to incorporate typescript and ts-loader. I created a file in the src directory with the following content: declare module '* ...

javascripttypescriptvue.jsts-loadervue-class-components

``Can you provide guidance on excluding matching values from a dictionary object in a Angular project?

I've developed a function that takes a dictionary object and matches an array as shown below: const dict = { CheckAStatus: "PASS", CheckAHeading: "", CheckADetail: "", CheckBStatus: "FAIL", CheckBHeading: "Heading1", CheckCStatus: "FAIL", ...

javascriptnode.jsangulartypescriptdictionary

Receiving a JavaScript function's output with Python Selenium

Currently, I am in the process of scraping data from a specific webpage. The focus is on extracting the return string value from a Javascript function snippet. The target value to be extracted is indicated as "2227885" https://i.sstatic.net/5dLJ ...

javascriptpythonseleniumselenium-webdriver

Counting newlines in a variable length in AngularJS is not being considered

Whenever I input text and include new lines using test.length, the new lines are not counted within the string. Since I am utilizing this text for sending SMS messages where all newlines need to be accounted for, this is an issue. Any suggestions? Press e ...

angularjs

The resolution of Angular 8 resolver remains unresolved

I tried using console.log in both the constructor and ngOnInit() of Resolver but for some reason, they are not being logged. resolve:{serverResolver:ServerResolverDynamicDataService}}, console.log("ServerResolverDynamicDataService constructor"); console ...

javascriptangulartypescriptangular-ui-routerangular-resolver

Is there a way in AngularJS to trigger an event at a designated time?

I recently developed a webpage using AngularJS. I am looking to trigger certain actions on my webpage within a specified timeframe. For instance, If it is 2016-01-07 11:00:00, I want ng-show to execute some action. I am utilizing the Angular-timer for ...

angularjsevents

Triggering an automatic pop-up window using JavaScript based on a PHP condition

I have developed a hidden pop-up box that becomes visible when targeted, with its opacity increasing to one. I am aiming for the pop-up to appear if the user is identified as a "firstTimeUser," a status saved in a PHP $_SESSION variable. However, I am stru ...

javascriptphphtmlcss

Loading JavaScript asynchronously using ExtJS

I have created a custom widget using the ExtJS framework. In order to load the necessary ext-all.js script asynchronously, I wrote an embedd.js script that also combines other JavaScript files. I've attached a function to be called when Ext.onReady is ...

javascriptasynchronousextjsdom-events