I have a web app I'm building using AngularJS. On the table of contents page, I want to display a list of all the articles published. I keep getting this error:
SyntaxError: Unexpected token :
at Object.parse (native)
at fromJson
app.js
var webApp = angular.module('webApp', ['ui.router']);
webApp.controller('TableofContentController', function($scope, $http) {
$http.get('articles.json')
.then(function(res){
$scope.articles = res.data;
});
});
articles.json
{
"articles": [
{
"id": "1",
"title": "Article Title",
"categories": [ "category": "1",
"category": "2" ],
},
{
"id": "2",
"title": "Article Title",
"categories": [ "category": "1",
"category": "2" ],
},
...etc..
]
}
relevant HTML
<div class="row" ng-controller="TableofContentController">
<div class="medium-12 columns" role="content">
<div class="medium-9 columns">
<article>
<div class="main">
<ul>
<li ng-repeat="article in articles">
<a ui-sref="">{{title}}</a>
</li>
....etc.....
Any suggestions on what I can do to fix this parsing error? I think I have JSON all formatted correctly, but I would appreciate any insight.
This section
"categories": [ "category": "1",
"category": "2" ],
should be an array of objects I think, like this
"categories": [ {"category": "1"},
{"category": "2"} ],
Syntax checking tools like jshint can be very helpful in finding problems like this
Related
I am trying to use angularjs for creating tree view and I am getting module error. I am trying to follow this link https://github.com/eu81273/angular.treeview
I followed the steps
added the js and css file
in the html added the
<div data-angular-treeview="true"
data-tree-id="abc"
data-tree-model="treedata"
data-node-id="id"
data-node-label="label"
data-node-children="children">
</div>
then in controller
var CIController = angular.module('CIController', ['ngMaterial', 'ngAnimate', 'ngAria', 'ngMessages', 'Alertify', 'ngFileUpload', 'angularTreeview',])
$scope.treedata =
[
{
"label": "User", "id": "role1", "children": [
{ "label": "subUser1", "id": "role11", "children": [] },
{
"label": "subUser2", "id": "role12", "children": [
{
"label": "subUser2-1", "id": "role121", "children": [
{ "label": "subUser2-1-1", "id": "role1211", "children": [] },
{ "label": "subUser2-1-2", "id": "role1212", "children": [] }
]
}
]
}
]
},
{ "label": "Admin", "id": "role2", "children": [] },
{ "label": "Guest", "id": "role3", "children": [] }
];
$scope.$watch('abc.currentNode', function (newObj, oldObj) {
if ($scope.abc && angular.isObject($scope.abc.currentNode)) {
console.log('Node Selected!!');
console.log($scope.abc.currentNode);
}
}, false);
But I am getting error in chorome console like module error. Kindly help to resolve this issue. AngularJS v1.3.15 is the version I am using.
How Display stores,bookmarks,favorites using below JSON Data
JSON data (vm.bookmarks):
[
{
"category": "stores",
"title": "store1",
"link": "http://www.store1.com",
},
{
"category": "stores",
"title": "store1",
"link": "http://www.store2.com",
},
{
"category": "bookmarks",
"title": "bookmark1",
"link": "http://www.bookmark1.com",
},
{
"category": "bookmarks",
"title": "bookmark2",
"link": "http://www.bookmark2.com",
},
{
"category": "bookmarks",
"title": "bookmark3",
"link": "http://www.bookmark3.com",
},
{
"category": "favorites",
"title": "favorites1",
"link": "http://www.favorites1.com",
},
{
"category": "favorites",
"title": "favorites2",
"link": "http://www.favorites2.com",
}
]
I want to list only categories' names using ng-repeat:
<div ng-repeat="item in vm.bookmarks|groupBy:'category'">
<h2>{{item.category}}</h2>
</div>
I want this to be displayed:
stores
bookmarks
favorites
But it displays nothing! What am I doing wrong?
P.S
I was using filters without injecting anything, like this:
<div ng-repeat="item in vm.bookmarks|filter:{category:'flyers'}" >
{{item.title}}
</div>
Not sure if I need to inject angular-filter to use groupBy filter - why?
You do not need to use (key, value) , also you need to inject angular.filter as dependency
var MyApp = angular.module("MyApp",['angular.filter']);
<ul class="nav nav-tabs" data-tabs="tabs"
ng-repeat="bookmark in vm.bookmarks|groupBy:'category'">
<li>{{bookmark.category}}</li>
</ul>
DEMO
var app = angular.module("myApp", ['angular.filter']);
app.controller("SimpleController", function($scope) {
this.bookmarks = [
{
"category": "stores",
"title": "store1",
"link": "http://www.store1.com",
},
{
"category": "stores",
"title": "store1",
"link": "http://www.store2.com",
},
{
"category": "bookmarks",
"title": "bookmark1",
"link": "http://www.bookmark1.com",
},
{
"category": "bookmarks",
"title": "bookmark2",
"link": "http://www.bookmark2.com",
},
{
"category": "bookmarks",
"title": "bookmark3",
"link": "http://www.bookmark3.com",
},
{
"category": "favorites",
"title": "favorites1",
"link": "http://www.favorites1.com",
},
{
"category": "favorites",
"title": "favorites2",
"link": "http://www.favorites2.com",
}
];
var vm = this;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js" > </script>
<body ng-app="myApp">
<div>
<div data-ng-controller="SimpleController as vm">
<ul class="nav nav-tabs" data-tabs="tabs"
ng-repeat="(key, value) in (vm.bookmarks|groupBy:'category')">
<div ng-repeat="cat in value | unique:'category' ">
<h1> {{cat.category}}</h1>
</div>
</ul>
</div>
</div>
</body>
</html>
I wanna show a category hierarchy data and I use angularJS with ng-repeat and ng-if.Here's to my demo file:
<div ng-app="" ng-controller="DanhMucController">
<ul>
<li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==0">{{danhmuc.name}}
<ul>
<li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==2">
{{danhmuc.name}}
<ul ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==4">
<li>{{danhmuc.name}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
controller:
<script>
function DanhMucController($scope, $http) {
var url = "category.txt";
$http.get(url).success(function(response) {
$scope.DanhMucList = response;
});
}
</script>
this file category data :
[{
"id": "1",
"name": "Parent1",
"depended": "0"
}, {
"id": "2",
"name": "Parent2",
"depended": "0"
}, {
"id": "3",
"name": "Parent3",
"depended": "0"
}, {
"id": "4",
"name": "ChildA",
"depended": "1"
}, {
"id": "5",
"name": "ChildB",
"depended": "2"
}, {
"id": "6",
"name": "ChildC",
"depended": "3"
}, {
"id": "7",
"name": "grandChildA",
"depended": "4"
}, {
"id": "8",
"name": "grandChildB",
"depended": "5"
}, {
"id": "9",
"name": "grandChildC",
"depended": "6"
}, {
"id": "10",
"name": "grandChildD",
"depended": "5"
}, {
"id": "11",
"name": "grandChildE",
"depended": "6"
}, {
"id": "12",
"name": "grandChildF",
"depended": "3"
}]
category Image
But I can not define the id of parent so it dont show data which I need .It must display:
-Parent 1 contain ChildA.
-Parent 2 contain ChildB.
-Parent 3 contain ChildC.
Everyone can suggest me a solution for my issues. Thanks all
you can do something like this here.
I would suggest though you arrange your data better instead of looping over the same data 3 times.
I am building an app using ionic/AngularJS. To test the web service calls I am using the best buy service. The response is as follows:
{
"from": 1,
"to": 10,
"total": 4665,
"currentPage": 1,
"totalPages": 467,
"queryTime": "0.009",
"totalTime": "0.045",
"partial": false,
"canonicalUrl": "/v1/categories?format=json&apiKey=****",
"categories": [
{
"id": "abcat0010000",
"name": "Gift Ideas",
"active": true,
"path": [
{
"id": "cat00000",
"name": "Best Buy"
},
{
"id": "abcat0010000",
"name": "Gift Ideas"
}
],
"subCategories": [
{
"id": "pcmcat140000050035",
"name": "Capturing Photos & Videos"
},
{
"id": "pcmcat140000050036",
"name": "Listening to Digital Music"
},
{
"id": "pcmcat140000050037",
"name": "Computing Made Easy"
},
{
"id": "pcmcat140000050039",
"name": "Simple GPS Navigation"
},
{
"id": "pcmcat140000050040",
"name": "Playing Video Games"
},
{
"id": "pcmcat140000050041",
"name": "Watching HDTV"
},
.........
How can I retrieve and display this information as a list on my device? I am aware of the $http service request, but how do I incorporate this into an ionic list?
Assuming that you already have written the logic to fetch data I have written this JSBin for implementing ion-list.
Let's Assume you are going to display the name field in your list.
app.js
var baseURL="*here your json request*";
var categoriesName=[];
$http.get('baseURL')
.success(function(response){
$scope.objectResponse = response.categories;
console.log($scope.objectResponse);
$scope.objectResponse.forEach(function(item) {
categoriesName.push(item.name);
console.log(categoriesName);
})
.error(function(response){
console.log(response);
});
html
<ul class="list">
<li class="item" ng-repeat="listname in categoriesName">
{{listname}}
</li>
</ul>
This is How your can retrieve and display this information as a list on device.
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>
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;
});
});