Having trouble displaying the results from a JSON object on my view page. The screen appears empty, but I can see the data in the console. When using ng repeat, it shows an error "Duplicate Key in Repeater."
The main requirement is to print the title from the JSON file and have it display when clicked, showing the Title as "example".
var appModule = angular.module('appModule', []);
appModule.factory('dataFactory', ['$http', function($http) {
var factory = {
itemDetails: function() {
return $http({
url: "action.json",
method: "GET",
})
.then(function(response) {
return response.data;
});
}
};
return factory;
}]);
appModule.controller('DataController', ['$scope', 'dataFactory', function($scope, dataFactory) {
var promise = dataFactory.itemDetails();
promise.then(function(data) {
$scope.itemDetails = data;
console.log(data);
});
$scope.select = function(item) {
$scope.selected = item;
}
$scope.selected = {};
}]);<!DOCTYPE html>
<html ng-app="appModule">
<head>
<meta charset="utf-8" />
<title>Dynamic Title</title>
<link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller=DataController>
<h3>Load Title Dynamically</h3>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.title}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<h2>Title: {{selected.title}}</h2>
</div>
</div>
</div>
</div>
</body>
</html>Action Data
{
"product": [{
"title": "Product View",
"path": "test1"
},
{
"title": "Product Add",
"path": "2"
},
{
"title": "Product Update",
"path": "test3"
},
{
"title": "Product delete",
"path": "test4"
}
],
"page": [{
"title": "About us"
}]
}