How to Retrieve JSON Object Using Dynamically Generated String in Angular

Question

How to Retrieve JSON Object Using Dynamically Generated String in Angular

Creating a controller in Angular involves retrieving URL parts and parameters using $statePrams.

The $http service is then called to retrieve data from a JSON file. Once the data is received, the content of a specific object element - determined by $stateParams - is assigned to a $scope variable. This variable can be manipulated in the view to generate an unordered list.

An issue arises when trying to access a dynamically generated path like

result['data']['datas']['timeline']

, resulting in an ngRepeat:dupe error.

If I manually specify the assignment as

$scope.naviData = result['data']['datas']['timeline'];

, it works fine and displays the desired data as list elements in the view.

To address this problem and achieve dynamic object element access without errors, two screenshots are provided:

First screenshot shows manual input: https://i.stack.imgur.com/NamCA.png

Second screenshot demonstrates generated variable usage: https://i.stack.imgur.com/yEVad.png

In both cases, the first console.info output displays the state parameters used to construct the path. Below are snippets of code responsible for handling these dynamic operations.

angular.module('MPWeb.datas', [])
  .controller('DataDetailsCtrl', function($scope, $state, $stateParams, $http) {
    // code block here
  });

Utilizing track by $index in the view results in the generation of list elements based on the characters of the constructed path.

javascript angularjs json

Answer 1

Answer №1

The issue arises when using trackby in the ng-repeat directive within your template. It is important to note that trackby requires unique keys from the objects in the array.

For example:

values = [{id:12,name:'king'},{id:13:name :'ram'},{id:14:name:'king'}]

Correct Usage:

<div ng-repeat="value in values  track by id">
{{value.name}} : {{value.id}}
</div>

Another Correct Example:

<div ng-repeat="value in values  track by $index">
{{value.name}} : {{value.id}}
</div>

Incorrect Usage:

<div ng-repeat="value in values  track by name">
{{value.name}} : {{value.id}}
</div>

Answer 2

The issue arises when using trackby in the ng-repeat directive within your template. It is important to note that trackby requires unique keys from the objects in the array.

For example:

values = [{id:12,name:'king'},{id:13:name :'ram'},{id:14:name:'king'}]

Correct Usage:

<div ng-repeat="value in values  track by id">
{{value.name}} : {{value.id}}
</div>

Another Correct Example:

<div ng-repeat="value in values  track by $index">
{{value.name}} : {{value.id}}
</div>

Incorrect Usage:

<div ng-repeat="value in values  track by name">
{{value.name}} : {{value.id}}
</div>

Answer 3

Answer №2

After spending some time grappling with it, I finally managed to figure out the solution with a little assistance. For those who may encounter this issue in the future, here is how you can resolve it within the controller:

  $scope.params = $stateParams;
  $scope.navPrefix = $state.current.url.split('/:')[0];
  $scope.navPrefix = ($scope.params.categoryId) ? $scope.navPrefix + '/' + $scope.params.categoryId + '/' : $scope.navPrefix + '/';
  $scope.activeItem = ($scope.params.articleId) ? $scope.params.articleId : $scope.params.categoryId;
  var tempCat = $state.current.url.substr(1);
  $scope.naviCat = tempCat.split('/:')[0];
  // set data for dynamic object handling
  var base = $scope.naviCat;
  ...
  // generate sideNavigation
  $http({
    method: 'GET',
    url: './json/mp-navigation.json'
  }).then(function successCallback(result, status, headers) {
    var naviMain = result.data[$scope.naviCat]['main'];
    var naviTemp = result.data[stateConfig.params.prefix][stateConfig.params.categoryId];
    $scope.naviData = (stateConfig.params.categoryId == '') ? naviMain : naviTemp;
    }, function errorCallback(result, status, headers) {
      console.warn(status + ' encountered while trying to retrieve: ' + headers);
  });

Cheers

Answer 4

After spending some time grappling with it, I finally managed to figure out the solution with a little assistance. For those who may encounter this issue in the future, here is how you can resolve it within the controller:

  $scope.params = $stateParams;
  $scope.navPrefix = $state.current.url.split('/:')[0];
  $scope.navPrefix = ($scope.params.categoryId) ? $scope.navPrefix + '/' + $scope.params.categoryId + '/' : $scope.navPrefix + '/';
  $scope.activeItem = ($scope.params.articleId) ? $scope.params.articleId : $scope.params.categoryId;
  var tempCat = $state.current.url.substr(1);
  $scope.naviCat = tempCat.split('/:')[0];
  // set data for dynamic object handling
  var base = $scope.naviCat;
  ...
  // generate sideNavigation
  $http({
    method: 'GET',
    url: './json/mp-navigation.json'
  }).then(function successCallback(result, status, headers) {
    var naviMain = result.data[$scope.naviCat]['main'];
    var naviTemp = result.data[stateConfig.params.prefix][stateConfig.params.categoryId];
    $scope.naviData = (stateConfig.params.categoryId == '') ? naviMain : naviTemp;
    }, function errorCallback(result, status, headers) {
      console.warn(status + ' encountered while trying to retrieve: ' + headers);
  });

Cheers

How to Retrieve JSON Object Using Dynamically Generated String in Angular

Answer №1

Answer №2

Similar questions

Steps to eliminate a specific value from an array

Following the path of JavaScript function calls

The directive in Angular compels the webpage to carry out the added HTML attribute

Transforming a JSON array into FormData results in a string representation

Transferring data between components in React by passing parameters through Links

Tips for creating an effective planar reflection using Open Graphics Library (OGL) in conjunction with a perspective camera

pressing the downward arrow does not cause the number to decrease

A guide on retrieving information from a database with PHP and transferring it to Javascript

Learn how to toggle between two different image sources with a single click event in JavaScript

What is causing ngdocs to produce zero files?

Tips for formatting the JSON date format in a Spring Boot application

Retrieving data from a JSON file depending on the selection made by the user in a dropdown menu

What is the reason behind material-ui's decision to invoke their dialogs twice?

Persistently Undefined Angular Attribute

Using Angular JS to redirect to a CodeIgniter controller involves utilizing the routing capabilities of Angular

Generating dynamic dropdown menus using data from a database with the help of PHP and Ajax technologies

Using Ajax to append form data to JSON is more efficient than using PHP alone

What is the method for defining an Angular directive within the link function of another directive?

Can the Twitter Bootstrap typeahead feature be used with an external data source?

"Automate the process of manual content duplication with JavaScript's for each replacement