Angular and json - proper way of getting value from json instead of hardcoding

Question

What is the proper way of substituting value obtained from json

var app = angular.module('plunker', []);

app.factory('myData', ['$http', function($http) {
  return {
    get: function() {
      return $http.get('data.json').then(function(response) {
        return response.data;
      });
    }
  };
}]);



app.controller('MainCtrl', ['$scope', '$http', 'myData', function($scope, $http, myData) {
  myData.get().then(function(data) {
    $scope.data = data; //this is fine
    $scope.Monday= Object.keys($scope.data.day.weekday.Monday.mac_id)
    $scope.Tuesday= Object.keys($scope.data.day.weekday.Tuesday.mac_id)
    $scope.Wednesday= Object.keys($scope.data.day.weekday.Wednesday.mac_id)
    console.log($scope.data );
  });
}]);

i wanted to show all keys of macid obtained from json, i used Object.keys($scope.data.day.weekday.Monday.mac_id)

Is there a better approach to get the data instead of parsing data separately for monday, tuesday, wednesday...etc. I believe the way I'm doing is not effective

My plunker link http://plnkr.co/edit/9P9oGgLCuSgivmvbNN2e?p=preview

Thanks in advance

Any help is appreciated

How about making weekday an array of 7 elements (0 = monday, 1 = tuesday, etc.) and use a loop? — JB Nizet
– JB Nizet, Commented Sep 26, 2015 at 15:05

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

There are a few options:

Option 1: `ng-repeat` over the object weekData:

Suppose in your model the data of the whole week is in an object:

$scope.weekData = $scope.data.day.weekday;

You then iterate over the week data as such:

<div ng-repeat="(day, valueForDay) in weekData">
    <ul ng-repeat="(key, macIds) in valueForDay">
      <li ng-repeat="(macKey, macVal) in macIds">{{macKey}}</li>
    </ul>
</div>

See plunker

Option 2: Transform your data in the model

You could transform the data in the model, so that all your mac_id values of the week are at the same level in the structure. Here is an example algorithm:

myData.get().then(function(data) {
    var weekData = data.day.weekday,
        weekArrayData = [];
    Object.keys(weekData).forEach(function (day) {
        weekArrayData.push(weekData[day].mac_id);
    })
    $scope.weekArrayData = weekArrayData;
});

See plunker

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 26, 2015 at 15:16

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5186342 Over a year ago

P. BazosI Appreciate your reply bro.... would be happy if you could help me with option 2

Daniel Bonnell · Accepted Answer · 2015-09-26 15:27:57Z

0

You could build a hash like so:

app.controller('MainCtrl', ['$scope', '$http', 'myData', function($scope, $http, myData) {
  myData.get().then(function(data) {
    $scope.data = data; //this is fine
    $scope.output = [];
    for(var i=0; i<Object.keys(data.day.weekday).length; i++) {
      day = Object.keys(data.day.weekday)[i];
      keys = Object.keys(data.day.weekday[day].mac_id);
      $scope.output[day] = keys;
    }
 });
}]);

Then iterate over the hash keys. Here is a Plunker

answered Sep 26, 2015 at 15:27

Daniel Bonnell

5,0279 gold badges52 silver badges92 bronze badges

Collectives™ on Stack Overflow

Angular and json - proper way of getting value from json instead of hardcoding

2 Answers 2

Option 1: `ng-repeat` over the object weekData:

Option 2: Transform your data in the model

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Option 1: ng-repeat over the object weekData:

Option 2: Transform your data in the model

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Option 1: `ng-repeat` over the object weekData: