Go into object with AngularJS

Question

I have trouble with my JSON-Files. I have an old one that works fine.

Now i get a new and i didn't find the way into the first "main_themes"-Object.

This is my actual module:

     angular.module('destinationsApp', [])
  .controller('destinationsCtrl', function($scope, $http){
    $http.get('https://raw.githubusercontent.com/MAHUKI-Webdesign/suntrips.github.io/master/data.json').then(function(itemsResponse) {
      $scope.items = itemsResponse.data;
    });
});

Actually i make it with something like this:

<li ng-repeat="item in items"><a href="#">{{item.name}}</a></li>

How i have to do it?

Here's my Plunkr with the working version:

https://embed.plnkr.co/U4WHAFQRZ2JsUOJVlAu7/

Here's my Plunkr with the not working version:

https://embed.plnkr.co/b3OtRKgzp1OQ0h1L3jDA/

Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://www2.suntrips.de/import/main_sub_themes-main.json","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":""} — Marc Hahn, Aug 17 '17 at 09:57
This part is simply because there is an error handler missing (i.e. you did not use .catch()); that's not the cause of your problem; rather, Plunker's HTTPS protocol is. — Ramsing Nadeem, Aug 17 '17 at 10:04

Abdullah Al Noman · Answer 1 · 2017-08-17T10:06:06.313

1

var url = "http://raw.githubusercontent.com/MAHUKI-Webdesign/suntrips.github.io/master/data.json";
$http({
    method: 'JSONP',
    url: url
}).
success(function(status) {
     $scope.items = itemsResponse.data;
                // handle valid reponse
}).
error(function(status) {
    //your code when fails
});

You are getting 'Access-Control-Allow-Origin' header is present on the requested resource. Origin to solve this change the rest api to give access to the localhost.Also see this .. Use JSONP

edited Aug 17 '17 at 10:06

answered Aug 17 '17 at 09:57

Abdullah Al Noman

2,817
4
20
35

Object { data: null, status: -1, headers: wd/<(), config: Object, statusText: "" } – Marc Hahn Aug 17 '17 at 09:59
Thanks but i'm more designer than developer so i failed once more – Marc Hahn Aug 17 '17 at 10:11
use this $http({ method: 'JSONP', url: url }) instead of http.get – Abdullah Al Noman Aug 17 '17 at 10:13
You mean like this: angular.module('destinationsApp', []) .controller('destinationsCtrl', function($scope, $http){ $http({ method: 'JSONP', url:'http://www2.suntrips.de/import/main_sub_themes-main.json'}).then(function(itemsResponse) { $scope.items = itemsResponse.data.main_themes; }); }); – Marc Hahn Aug 17 '17 at 10:16

score 0 · Answer 2 · answered Aug 17 '17 at 09:37

0

since the response is an object just access the main_themes property.

 $scope.items = itemsResponse.data.main_themes

answered Aug 17 '17 at 09:37

Sachila Ranawaka

39,756
7
56
80

can you create a plnkr – Sachila Ranawaka Aug 17 '17 at 09:40
there is a problem with the cors. you need to put access allow headers in the server side – Sachila Ranawaka Aug 17 '17 at 10:06

score 0 · Answer 3 · answered Aug 17 '17 at 09:37

0

Access the main_themes

 $scope.items = itemsResponse.data.main_themes

answered Aug 17 '17 at 09:37

Sajeetharan

216,225
63
350
396

score 0 · Answer 4 · answered Aug 17 '17 at 09:54

0

Here's my Plunkr with the working version:

https://embed.plnkr.co/U4WHAFQRZ2JsUOJVlAu7/

Here's my Plunkr with the not working version:

https://embed.plnkr.co/b3OtRKgzp1OQ0h1L3jDA/

answered Aug 17 '17 at 09:54

Marc Hahn

3
3

score 0 · Answer 5 · answered Aug 17 '17 at 10:01

It does not work on Plunker;

Error that I got:

Mixed Content: The page at 'https://plnkr.co/edit/b3OtRKgzp1OQ0h1L3jDA?p=preview' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www2.suntrips.de/import/main_sub_themes-main.json'. This request has been blocked; the content must be served over HTTPS

Please make requests to server using HTTPS protocol when using Plunker.

Go into object with AngularJS

5 Answers5