retrieving JSON data within the controller

Question

retrieving JSON data within the controller

When I use the command console.log($scope.data), I am able to view my JSON file. Additionally, by using

<div ng-repeat="item in data">

, I can see all the items in the view. However, when I try console.log($scope.data[0]) or console.log($scope.data[0].name), I get an error stating "undefined". Similarly, console.log($scope.data.length) returns 0. How do I access the items in the controller?

Edit:

$scope.data contains a JSON file retrieved using $scope.data = service.query();. The structure of the json file is as follows:

I am confused as to why the length is returning 0 even though ng-repeat is functioning properly.

javascript arrays json angularjs

Answer 1

Answer №1

It appears that crucial information, such as the implementation of service.query, has been omitted from the original question.

For a better understanding of the issue, you can refer to this live example.

const myApp = angular.module('myApp', []);

myApp.factory('dataService', function ($timeout) {
  const data = [];

  return {
    query: function () {
      $timeout(function () {
        data.push(1, 2, 3);
      }, 1000);

      setTimeout(function () {
        data.push('Oops, ng-repeat is not recognizing this');
      }, 2000);

      return data;
    }
  };
});

myApp.controller('MainController', function($scope, dataService) {
  $scope.data = {
    active: [1, 2, 3],
    inactive: dataService.query()
  };

  $scope.$watch('data.inactive', function (newData, oldData) {
    if (newData === oldData) return;
    console.log($scope.data.inactive[0]);
  }, true);
});

Answer 2

It appears that crucial information, such as the implementation of service.query, has been omitted from the original question.

For a better understanding of the issue, you can refer to this live example.

const myApp = angular.module('myApp', []);

myApp.factory('dataService', function ($timeout) {
  const data = [];

  return {
    query: function () {
      $timeout(function () {
        data.push(1, 2, 3);
      }, 1000);

      setTimeout(function () {
        data.push('Oops, ng-repeat is not recognizing this');
      }, 2000);

      return data;
    }
  };
});

myApp.controller('MainController', function($scope, dataService) {
  $scope.data = {
    active: [1, 2, 3],
    inactive: dataService.query()
  };

  $scope.$watch('data.inactive', function (newData, oldData) {
    if (newData === oldData) return;
    console.log($scope.data.inactive[0]);
  }, true);
});

retrieving JSON data within the controller

Answer №1

Similar questions

Problems with the configuration of the angular ui-grid settings object

Manipulating the background-image in CSS using AngularJS is a breeze

Unable to assign a value to a variable within a Mongoose callback function

Using Passport.js with client-side templating: A step-by-step guide

Is it possible to connect a date range picker custom directive in AngularJS with the behavior of AngularUI-Select2?

Generate with different HTML elements

What is the best method for retrieving the entire row data based on the maximum value in a column?

Enhancing code readability in vim with custom Javascript syntax highlighting

Pointer-based bubble sort algorithm

Automatically populate a dropdown list based on the selection made in another dropdown menu

Is QA supported by LG WebOS 3.5 through webdriver?

Pass a URL string to a different script using Node.js

Preserving quotation marks when utilizing JSON parsing

Customize the default email validator in AngularJS

Utilizing Vuex state within Vue-Router route definitions

Choose the ngModel option from the dropdown menu

Incorporating Framer Motion into traditional React class components (non-functional approach)

The bxSlider reloadSlider() function is not defined once the page has finished loading

Implement a counter in a JavaScript table, initializing it to zero

Node.js can provide a reusable email framework that can be used across