Unable to define the 'grid' property as it is currently undefined

Recently started working with Angular and ng-grid, encountering an issue while trying to display a simple static json file in the grid. The error message shown is:

Cannot set property 'grid' of undefined

Seeking assistance from experts out there.

My code snippet:

angular.module('healthyLivingApp')
  .controller('SubscribersCtrl', function ($scope,$http) {
    $http.get('http://localhost:9000/subscribers.json').success(function(data){
        $scope.subscribers = data;
    });
     $scope.gridOptions = {
        data:'subscribers'
    }

  });

app.js

.module('healthyLivingApp', [
'ngAnimate',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ngGrid',
    'ui.bootstrap'
  ])

HTML

<h1>Subscribers</h1>
<div class="gridStyles" ng-grid="gridOptions">
</div>

The technology stack includes bower, Angular "1.3.12", ng-grid "2.0.14", jQuery "2.1.3"

javascriptangularjsbowerng-grid

Answer №1

Your controller includes an asynchronous task

$http.get('http://localhost:9000/subscribers.json').success(function(data){
    $scope.subscribers = data;
});

After your controller finishes initializing and Angular begins rendering the DOM, the asynchronous task may not have completed yet, causing $scope.subscribers to remain undefined. You have specified that ng-grid should retrieve data from subscribers

$scope.gridOptions = {
    data:'subscribers'
}

To solve this issue, it is recommended to define $scope.subscribers at the start of your controller

angular.module('healthyLivingApp')
  .controller('SubscribersCtrl', function ($scope,$http) {
      $scope.subscribers = [];
      $http.get('http://localhost:9000/subscribers.json').success(function(data){
        $scope.subscribers = data;
      });
      $scope.gridOptions = {
        data:'subscribers'
      };
  });

Answer №2

It appears to be related to the data binding policy.

When you bind data in the view, it binds by reference. If you bind the subscribers in the $scope in your code, any updates made to the reference in your controller will reflect in the data.

To ensure that changes to the object's attributes are reflected in the view, consider binding with someObjName.subscribers. This way, both someObjName and its attributes will be watched for changes and automatically updated in the view.

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

Using Npm to install a module results in an abundance of files being provided

Back when I used npm install 6 months ago to install a module, it would create a new folder under node_modules containing all the files for that module. However, now when I use it, it creates multiple files for one module. How can I install a module to a ...

javascriptnode.jsnpm

Passing variables from AJAX response to PHP using a passthru function

In my PHP file, I have implemented a functionality where certain checkboxes are checked and upon clicking a button, a JavaScript file is triggered. The JavaScript code snippet used is as follows: $.ajax ({ type: "POST", url: "decisionExec.php", ...

javascriptphpjqueryajaxpassthru

Swapping out a background video for a background image in cases where auto-play is restricted on the device

How can I replace an auto-play background image with a static image on devices that do not support auto-play? The <video> tag's POSTER attribute works, but it seems that on my iPhone (which does not allow auto-play), the video is still downloade ...

javascripthtmlcsshtml5-videobootstrap-4

Access your account using Google authentication within an Angular framework

My latest project involves creating an API that allows users to log in with Google by using the endpoint http://localhost:3001/api/v1/user/google. Here's how it works: A user clicks on the link http://localhost:3001/api/v1/user/google The endpoint h ...

javascriptnode.jsangulargoogle-apigoogle-oauth

Basic AngularJS application, however I am receiving {{this is supposed to be the information}}

Building an angularjs app I have set up an asp.net mvc4 application and integrated the angularjs package using nuget. The Layout.cshtml file has been updated to look like this: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta ...

javascriptasp.net-mvcangularjs

Discovering nested routes in Ember.js through search functionality

I am currently working on implementing a search functionality within a nested route that shares a model. Below is an example of my code: The "Products" and "Search" functionalities return a JSON response. Router Market.Router.map -> @resource &a ...

javascriptsearchember.jsnested-routes

Troubleshooting issue: Bootstrap button onclick function not firing

My node express app is using EJS for templating. Within the app, there is a button: <button type="button" class="btn btn-success" onclick="exportWithObjectId('<%= user.id %>')">Export to csv</button> Accompanying the button i ...

javascriptnode.jstwitter-bootstrapejs

Implement TextGeometry.js within Three.js

I'm curious about the utilization of TextGeometry.js from the extras directory in three.js for adding text to a scene. I came across this file but am unsure how to integrate it properly. If you're familiar with its implementation, any guidance wo ...

javascript3dthree.js

[Protractor][Internet Explorer 11]-->I am facing an issue where clicking on a link does not open a new tab even though I have configured the IE browser settings properly

For example: ele.click(); is able to open a new tab in Chrome and Firefox, but not in IE11. However, if I manually click the link, it will open a new tab in IE11. Can someone explain why this is happening? What steps should I take to resolve it? Thank y ...

javascriptinternet-explorerseleniumselenium-webdriverprotractor

Accessing the req property beyond the route endpoints

const express = require('express'); const router = module.exports = express.Router(); const server = require("http").Server(express); const io = require("socket.io")(server); server.listen(5000); // Need a way to access user.id here router.g ...

javascriptnode.jsexpress

Protractor fails to detect displayed native alerts

Attempting to manage a native opened alert, but encountering an issue with protractor not recognizing the alert and displaying an error in the console: 1) Test cases pull - LiveSite - Call Message: NoSuchAlertError: no alert open ...

javascriptselenium-webdriverjasmineprotractoralert

One portion of the page is not appearing on the mobile version

I'm having an issue with one of the sections on my website not displaying correctly in mobile view. I've checked within WooCommerce and the PHP file, but everything appears to be fine. I attempted to override the section using !important, as well ...

javascripthtmljquerycss

Searching for Random Images in Discord using JavaScript is a fun and interactive way

I'm currently working on developing a Discord bot using discord.js to generate random images. Initially, I successfully implemented this functionality for cursed images. However, when I attempted to adapt the code for 'mcimage' to display Mi ...

javascriptnode.jsdiscord.js

Simplify nested JSON data

I'm struggling with a JSON object that looks like this: const people = { name: 'My Name', cities: [{city: 'London', country: 'UK'},{city: 'Mumbai', country: 'IN'},{city: 'New York', country: ...

javascriptjsonnestedflatten

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring

My current setup involves a class based component that looks like this class ArInput extends React.Component { render() { const { shadowless, success, error } = this.props; const inputStyles = [ styles.input, !shadowless && s ...

javascriptreactjstypescriptreact-nativematerial-ui

The page may experience some issues in Firefox, but it functions properly in Chrome

I designed a sign-in box with email and password inputs, along with some JavaScript to change its style when filled in. The CSS I used also moves the placeholder when the input is focused. Everything was working perfectly until I tested it in Firefox. Fi ...

javascripthtmlcssgoogle-chromefirefox

Error in AngularJs: [$injector:modulerr] Unable to create schemaForm module instance

Trying to integrate angular-schema-form into AngularJs Seed has been a challenge. Following the steps outlined in the angular-schema-form repository: view1.js 'use strict'; angular.module('myApp.view1', ['ngRoute', 'sc ...

javascriptangularjsnpmbower

"Revolutionary AJAX-enabled PHP social commenting system with multi-form support

Why is it that when I submit forms using these ajax functions in PHP, they only send to the first form on the page? I have multiple forms under each article and I want them to be submitted separately. What am I doing wrong? ...

javascriptphpjqueryhtmlajax

How can I create a notification popup triggered by a button click with Ajax and Javascript?

I'm in the process of developing a website that involves notifications, but I am unsure how to display them when a button is pressed. For example, clicking "Show Weather" should trigger a notification to appear in the bottom corner of the page. https ...

javascriptjqueryhtmlcssajax

Arranging an array of JavaScript objects based on a sub-array's property/value

When data is returned from a server, the structure may not always be in our control. For example... var data = { "TrackingResults": [ { "Name": "Pack One", "Products": { "Product": [ ...

javascriptarraysjsonsorting