When exchanging information in Angular UI-Grid, newly added columns may not appear when modifying the dataset from an external source

Question

When exchanging information in Angular UI-Grid, newly added columns may not appear when modifying the dataset from an external source

I have developed a query tool with an angular form that is filled out and submitted using AJAX to retrieve JSON data. This JSON response is then rendered into ui-grid. Here's an example of the JSON response:

{
"success": true,
"message": "",
"columns": ["first_name", "last_name", "company", "employed"]
"results": [
    {first_name: "John", last_name: "Smith", company: "Abc Inc", employed: true},
    {first_name: "Johnny", last_name: "Rocket", company: "Abc Inc", employed: true}]
}

While working on both the PHP and angular components, I encountered an issue where if a new dataset is retrieved through a separate AJAX call on the same page, any columns not present in the original dataset do not render. This causes problems as the table is essentially cleared when there are no matching columns, even though I often need to display completely different data in ui-grid within the same page.

Upon receiving the JSON data, I simply bind the jsonResult.results to the existing $scope.myData variable which ui-grid is connected to.

I have created a plunker to demonstrate this issue. The initial dataset has a "punk" column, and by clicking "swap data," an attempt is made to load a dataset with an "employee" column instead of "punk." I have explored solutions such as directives to refresh or reload when the $scope.myData variable changes using $watch, as well as investigating options like $scope.columnDefs to inform ui-grid. However, as someone relatively new to angular and javascript, some of these concepts are still challenging for me to grasp.

javascript ajax angularjs angular-ui angular-ui-grid

Answer 1

Answer №1

I have made some adjustments to your plunker:

$scope.switchData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'worker' }
    ];
    $scope.gridOpts.data = data2;
    //worker column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to worker
  }
};

http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

Given that you already have the columns in your JSON, it should be quite simple to implement.

Answer 2

I have made some adjustments to your plunker:

$scope.switchData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'worker' }
    ];
    $scope.gridOpts.data = data2;
    //worker column changes to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data1;
    //employee column changes to worker
  }
};

http://plnkr.co/edit/OFt86knctJxcbtf2MwYI?p=preview

Given that you already have the columns in your JSON, it should be quite simple to implement.

Answer 3

Answer №2

After studying Kevin Sage's answer and analyzing the plunker example, I made an additional discovery. When using the backward-compatible "field" attribute for swapping data in column definitions, issues arise if there are overlapping field names. This results in incorrect rendering of column headers and widths. To resolve this problem, use the "name" attribute instead.

    $scope.switchData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data2;
    // Change from punk to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'punk' }
    ];
    $scope.gridOpts.data = data1;
    // Change from employee to punk
  }
};

See the working example: Plunker

Answer 4

After studying Kevin Sage's answer and analyzing the plunker example, I made an additional discovery. When using the backward-compatible "field" attribute for swapping data in column definitions, issues arise if there are overlapping field names. This results in incorrect rendering of column headers and widths. To resolve this problem, use the "name" attribute instead.

    $scope.switchData = function() {
  if ($scope.gridOpts.data === data1) {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'employee' }
    ];
    $scope.gridOpts.data = data2;
    // Change from punk to employee
  }
  else {
    $scope.gridOpts.columnDefs = [
      { name:'firstName' },
      { name:'lastName' },
      { name:'company' },
      { name:'punk' }
    ];
    $scope.gridOpts.data = data1;
    // Change from employee to punk
  }
};

See the working example: Plunker

Answer 5

Answer №3

This is how I solved it:

$http.get('url').success(function(response) {
// clearing existing data
gridOptions.data.length = 0;
// updating data in the next digest cycle 
$timeout(function() {
gridOptions.data = response;
});
});

Answer 6

This is how I solved it:

$http.get('url').success(function(response) {
// clearing existing data
gridOptions.data.length = 0;
// updating data in the next digest cycle 
$timeout(function() {
gridOptions.data = response;
});
});

When exchanging information in Angular UI-Grid, newly added columns may not appear when modifying the dataset from an external source

Answer №1

Answer №2

Answer №3

Similar questions

Receiving the error message "Encountered issue reading property of 0" while attempting to retrieve a specific element from an array

Changing the filepath for the build script in the package.json file for a NextJS project when deploying to Heroku

How can I retrieve text adjacent to a checked input checkbox by using JQuery (or JavaScript)?

Ajax request triggers a page refresh

Executing untrusted JavaScript code on a server using a secure sandbox environment

What is the best way to paginate aggregated results in Mongoose?

Tips for Implementing the `otherwise` Function in Angular 2's UI-Router

"Mastering the art of sending a request to the server using AJAX with the

The issue persists with Angular routing as the page does not load even when adding a template, resulting in nothing being

What are some ways to bypass a closed Google form that is no longer accepting responses? I need to find a way to submit my form even after the deadline

The mysterious case of the disappearing items: why does Firebug show a blank array of objects in JavaScript and AngularJS?

Verifying if form submission was done through AJAX using PHP

Tips for transferring the id from a delete button to a delete button in a popup dialog box

Replace Vue's mixin function

exploring div element(s) with jQuery

Is it possible to perform direct URL searches using react-router-dom?

Is there a way to access the contents of ng-repeat using getElementById?

Issue with mouseout gap in Microsoft Edge when using the <select> element

When invoking the jQuery ".load('pageName')" method, HTML pages are not loaded from the application cache

What is the process for uploading an image using fetch?