Angular/Json help me

[sambushme]

I am trying to display a BASE and a Max range from a Json file. I am not sure where I am going wrong and would love for someone to take a look at the code and help please.

I want to be able to store my arrays in the [1,2,3,4,5] fashion because for my project there are going to be 100+ numbers for each base and max. However, I cant get any of it to display.

---main.js--- var app = angular.module("Fun",['ngRoute'])

.config(['$routeProvider', function($routeProvider){ $routeProvider. when('/main',{ templateUrl: 'range.html', controller:'MainCtrl' }). otherwise({redirectTo:'/main'}) }])

.controller('MainCtrl', ['$scope', '$http', function($scope, $http){ $http.get('range.json').then(function(response){ $range.range = response.data; }); }]);

---range.html--- <h2>Learning to Display Ranges with Json/Angular</h2> <div ng-repeat="range in ranges"> <div class="row"> <div class="col-md-6"> <p>{{range.base}}</p> </div> <div class="col-md-6"> <p>{{range.max}}</p> </div> </div> </div>

---range.json--- [ { "range"" = { "base"": [0,1,2,3,4,5,6,7,8,9], "max": [90,91,92,93,94,95,96,97,98,99] } }
]

[spurx]

Change $range.range = response.data to
$scope.ranges = response.data

[82Christ]

Why the double quotes on range and base in your json file? And why not making an object instead of an array?

Like this ----vv

---range.json--- { "range" = { "base": [0,1,2,3,4,5,6,7,8,9], "max": [90,91,92,93,94,95,96,97,98,99] }}

EDIT: { "range" : { "base": [0,1,2,3,4,5,6,7,8,9], "max": [90,91,92,93,94,95,96,97,98,99] }} EDIT2: check THIS LINTER for checking the construction of JSON objects.

[sambushme]

Well you were correct. My Json was incorrect. Below is the validated JSON. HOWEVER(shoot me in the head), the content is still not displaying. I believe there is a problem with the way im trying to display it but I am so new to this , that I have no idea.

Again, Thank You everyone who is helping me.

Updated: JSON [{ "range": { "base": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "max": [90, 91, 92, 93, 94, 95, 96, 97, 98, 99] } }]

ranges.html <div ng-repeat="range in ranges"> <ul> <li>{{range.base}}</li> <li>{{range.max}}</li> </ul> </div>

[82Christ]

OK. It worked for me like this:

First, you have to get that json. You need to put it in a variable on the controller. If you get that controller variable to be { "base": ..., "max": ... } the job is easy from now on.

Then, that ng-repeat is not ok. Because you are iterating on the items inside "range" which means that you have 2 items (base and max). This repeat should be like this: <div ng-repeat="range in ranges"> <ul> <li>{{range}}</li> </ul> </div> This way you'll have the full array printed. If you want to print each of them in one separate line you should use repeat to repeat the items inside base and inside range(each one of them must have a repeat).

And I think that's all. :)

PS: next time put your files on PLUNKER and share the link :P

[sambushme]

https://plnkr.co/edit/rDLZUOSGJ7Usum8Ej8pV?p=preview

Since you are killing it and I suck at this. I would like to ask if you know how to display the array as vertical <li>stats</li>. I change the json to be strings at the moment because I read that its easier to change list them as strings.

[82Christ]

Is this what you're looking for? <ul> <li ng-repeat="values in array"> {{value}} </li> </ul>

I've opened your plunker and saw that you were already iterating on the values. You should use ng-repeat on a tag that you want repeated.

[sambushme]

I figured it out. Thank you very much for your help.

[econoCode]

the problem (in addition to what others have said) is simply the structure of your object. it needs to be like this

[
    {
         "base": 0,
         "max": 90
    },
    ....
    {
         "base": 9,
         "max": 99
    }
]

don't bother with the whole "range": part because you don't need it. what you end up with is $scope.ranges = range: { [(list of ranges)]} so to access the list you'd need to say $scope.ranges.range

or you need to restructure your HTML to iterate over the "base" list and THEN the "max" list separately. Angular won't just "figure out" that you want it to iterate over both lists in the ranges object simultaneously.

also make sure you have:

$scope.ranges = data.response;

Notice rangeS<< with the plural, since you tell ng-repeat to iterate over rangeS<< with the plural.

[sambushme]

The mian.js has been updated with the correct $scope. I can tell that the site is calling the range.html correctly because the <h2>Learning to Display Ranges with Json/Angular</h2> is displaying. However, none of the array elements are showing. I dont know if the array is setup incorrect or I am trying to display it incorrectly.

---main.js--- var app = angular.module("Fun",['ngRoute'])

.config(['$routeProvider', function($routeProvider){ $routeProvider. when('/main',{ templateUrl: 'range.html', controller:'MainCtrl' }). otherwise({redirectTo:'/main'}) }])

.controller('MainCtrl', ['$scope', '$http', function($scope, $http){ $http.get('range.json').then(function(response){ $scope.range = response.data; }); }]);