Loading json data into angularjs ng-repeat and outside of ng-repeat from same json file

Question

i'm new to angular and a little lost. i'm able to load the data and display it, but i'm confused about loading other data that is not part of the ng-repeat i have set up from the same json file. here is what i have so far.

i would like to not use $scope.titleName = "John Doe"; $scope.infotext = "some more info" and have this info come from within the json file.

thanks for any help you can give.

var app = angular.module("myApp", []);



	app.controller('something', function ($scope, $http){
		$http.get('site.json').success(function(data) {
	  		$scope.sites = data;
	  		$scope.titleName = "John Doe";
	  		$scope.infotext = "some more info"
		});
	});



/* json file content */

[
  {
    "name": "tim",
    "image": "/features/home-1.jpg",
    "link": "http://www.bbc.co.uk"
  },
  {
    "name": "don",
    "image": "/features/home-1.jpg",
    "link": "http://www.bbc.co.uk"
  },
  {
    "name": "Mike",
    "image": "/features/home-1.jpg",
    "link": "http://www.bbc.co.uk"
  },
  {
    "sub": {"titleName": "Homer", "infotext":"two"}
  }
]

<body ng-app="myApp" ng-controller="something" >
        <div class="wrapper">
            <h1>{{titleName}}</h1>
            <p class="info">{{infotext}}</p>
            <div class="big"  ng-repeat="site in sites ">
                <a href="{{site.link}}" target="_blank">
                    <img src="{{site.image}}">
                </a>          
                <h2>{{site.name}}</h2>

            </div>
        </div>

</body>

What is your exact problem. I couldn't understand it. Can you provide more explanation. — xxlali
– xxlali, Commented Jan 12, 2016 at 13:26

Arnaud Gueras · Accepted Answer · 2016-01-12 14:00:47Z

0

Change your JSON because the last object of the array is different from sites, I suggest to have a JSON like this :

{
    "sites": [{
        "name": "tim",
        "image": "/features/home-1.jpg",
        "link": "http://www.bbc.co.uk"
    }, {
        "name": "don",
        "image": "/features/home-1.jpg",
        "link": "http://www.bbc.co.uk"
    }, {
        "name": "Mike",
        "image": "/features/home-1.jpg",
        "link": "http://www.bbc.co.uk"
    }],
    "sub": {
        "titleName": "Homer",
        "infotext": "two"
    }
}

You have also to modify your controller

app.controller('something', function ($scope, $http){
    $http.get('site.json').success(function(data) {
        $scope.sites = data.sites;
        $scope.titleName = data.sub.titleName;
        $scope.infotext = data.sub.infotext;
    });
});

edited Jan 12, 2016 at 14:00

answered Jan 12, 2016 at 13:22

Arnaud Gueras

2,06215 silver badges14 bronze badges

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

4 Comments

mike Over a year ago

thanks, but now my data is not loading for sites. do i need to make a change to the controller to make it work?

Martijn Welker Over a year ago

Change $scope.sites = data; to $scope.sites = data.sites;

mike Over a year ago

my ng-repeat="site in sites " is still not loading, but $scope.titleName = data.sub.titleName; $scope.infotext = data.sub.infotext; are laoding fine. do i need to change ng-repeat?

Arnaud Gueras Over a year ago

you should have seen that I made a little error and uses data.site instead of data.sites

Collectives™ on Stack Overflow

Loading json data into angularjs ng-repeat and outside of ng-repeat from same json file

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related