I am working on an app where I can have a list of categories as my home and the when someone clicks on the category option, a list subcategory is shown. the catch is that I want the categories to have their own .json file and the list subcategory with its own. how would that controller look, I am very new to angularjs but loving it so much. Example Category A has subcategories 1a, 2a, 3a, 4a.
Anyway help will be greatly appreciated.
angular.module('starter', ['ionic', 'ionic-material',])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
//states
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/main.html',
controller: 'listController'
})
.state('app.categories', {
url: '/categories',
templateUrl: 'templates/categories.html',
controller: 'listController'
})
.state('app.itemList', {
url: '/itemList',
templateUrl: 'templates/itemList.html',
controller: 'restController'
})
$urlRouterProvider.otherwise('/app/categories');
})
So this below is my controller for categories, I was hoping that if there is a way to have another controller for the subcategories from another .json file
//controller for the categories
.controller("listController", ['$scope','$http', function($scope, $http){
$http.get('js/data.json').success(function(data) {
$scope.cusines = data;
});
}]);
You can have a subcategories json for each category.
This is a working plunker.
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.categories', {
url: '/categories',
views: {
'menuContent': {
templateUrl: 'templates/categories.html',
controller: 'listController'
}
}
})
.state('app.subcategories', {
url: '/categories/:id',
views: {
'menuContent': {
templateUrl: 'templates/subcategories.html',
controller: 'subListController'
}
}
})
.state('app.itemList', {
url: '/itemList',
templateUrl: 'templates/itemList.html',
controller: 'restController'
})
$urlRouterProvider.otherwise('/app/categories');
});
controllers.js
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})
.controller("listController", ['$scope','$http', function($scope, $http){
$http.get('js/data/data.json').success(function(data) {
$scope.categories = data;
});
}])
.controller('subListController', ['$scope', '$stateParams', '$http', function($scope, $stateParams, $http) {
console.log($stateParams.id);
$http.get('js/data/dataSub' + $stateParams.id + '.json').success(function(data) {
$scope.subCategories = data;
});
}]);
In subListController you get the json file with a dynamic name ('dataSub' + categoryId).
categories.html
<ion-view view-title="Categories">
<ion-content>
<ion-list>
<ion-item ng-repeat="category in categories" href="#/app/categories/{{category.id}}">
{{category.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
subcategories.html
<ion-view view-title="Sub category">
<ion-content>
<ion-list>
<ion-item ng-repeat="subCategory in subCategories">
{{subCategory.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
data.json
[
{
"id": 1,
"name": "Category A"
},
{
"id": 2,
"name": "Category 2"
},
{
"id": 3,
"name": "Category 3"
},
{
"id": 4,
"name": "Category 4"
}
]
dataSub1.json
[
{
"id": 1,
"name": "1a"
},
{
"id": 2,
"name": "2a"
},
{
"id": 3,
"name": "3a"
},
{
"id": 4,
"name": "4a"
}
]
Related
So I'm trying to build a table or list of missing persons, the list will repeat an array of JSON objects with ng-repeat.
The problem, broken up:
1.Why is JSON giving me a parse error? It isn't the base64 image code, that part is correct and works fine when included in the index.
2.Is there a better way to include an image in JSON?
3.Is JSON the best answer for this problem? What are my other options?
My JSON file is
JSON
{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "<img src=\"data:image/jpeg;base64,data\">"
}
User lin has already corrected my syntax in a previous question, but I still get an error :
SyntaxError: Unexpected token
in JSON at position 10333
Index
<div class="container"
style="
margin-top:0px width=100%" ui-view>
</div>
Controllers
/*globals angular, console, $http, data, ListingsController*/
var mymodule = angular.module("controllers", []);
mymodule.controller("HomeController", function ($scope) {console.log("HomeController"); });
mymodule.controller("AboutController", function ($scope) {console.log("AboutController"); });
mymodule.controller("ListingsController", function ($scope, $http) {var data = $http.get("js/data.json"); });
mymodule.controller("ContactController", function ($scope) {console.log("ContactController"); });
mymodule.controller("ReportController", function ($scope) {console.log("ReportController"); });
app.js
/*global angular*/
angular.module('app', ['ui.router', 'controllers'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'AboutController'
})
.state('listings', {
url: '/listings',
templateUrl: 'templates/Listings.html',
controller: 'ListingsController'
})
.state('contact', {
url: '/contact',
templateUrl: 'templates/Contact.html',
controller: 'ContactController'
})
.state('report', {
url: '/report',
templateUrl: 'templates/Report.html',
controller: 'ReportController'
});
});
Some observations :
As we already have a JSON object with valid JSON then why you want to parse it.
If it is a JSON String then if you parse it using JSON.parse() it is parsing the JSON string successfully without any error.
var jsonStr = '{ "FullName": "Lucy Ann Johnson","WentMissing": "1961","Age:": "20","Description": "Short brunette, was last seen wearing a green dress.","Image": "<img src=\'data:image/jpeg;base64,data\'>" }';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj)
Once you fixed the JSON syntax error (which is actually not able to reproduce because of lag of information in your question) you could put out a rendered list of by ng-repeat-ing the array like in this fiddle.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.myArray = [{
"FullName": "Peter Power",
"WentMissing": "1941",
"Age:": "77",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "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"
},{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "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"
},{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "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"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="data in myArray">
<p>Name: {{ data.FullName }}</p>
<p>Went missing: {{ data.WentMissing }}</p>
<p>Age: {{ data.Age }}</p>
<img ng-src="data:image/png;base64,{{data.Image}}" />
<p>Description: {{ data.Description }}</p>
<hr />
</div>
</div>
I'm working on putting an image in a JSON object, which is proving to be a real pain. Although I can get the image to display on the website's landing page (base 64 code is correct), what I want to do is to display an object's attributes including the image with ui-view.
JSON
{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image:" <img src="data:image/gif;base64,">
}
Index
<div class="container"
style="
margin-top:0px width=100%" ui-view>
</div>
Controllers
/*globals angular, console, $http, data, ListingsController*/
var mymodule = angular.module("controllers", []);
mymodule.controller("HomeController", function ($scope) {console.log("HomeController"); });
mymodule.controller("AboutController", function ($scope) {console.log("AboutController"); });
mymodule.controller("ListingsController", function ($scope, $http) {var data = $http.get("js/data.json"); });
mymodule.controller("ContactController", function ($scope) {console.log("ContactController"); });
mymodule.controller("ReportController", function ($scope) {console.log("ReportController"); });
app.js
/*global angular*/
angular.module('app', ['ui.router', 'controllers'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeController'
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'AboutController'
})
.state('listings', {
url: '/listings',
templateUrl: 'templates/Listings.html',
controller: 'ListingsController'
})
.state('contact', {
url: '/contact',
templateUrl: 'templates/Contact.html',
controller: 'ContactController'
})
.state('report', {
url: '/report',
templateUrl: 'templates/Report.html',
controller: 'ReportController'
});
});
Your errors comes up because your JSON is not valid. Try a correct JSON syntax and escape your delimiters like:
{
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "<img src=\"data:image/gif;base64,\">"
}
A much better approach is to only parse the raw data into your view to keep your application pattern strict. This fiddle shows an example how it could work.
View
<div ng-controller="MyCtrl">
<img ng-src="data:image/png;base64,{{data.Image}}" />
</div>
AngularJS Application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
$scope.data = {
"FullName": "Lucy Ann Johnson",
"WentMissing": "1961",
"Age:": "20",
"Description": "Short brunette, was last seen wearing a green dress.",
"Image": "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"
};
});
I'm having trouble in fetching specific array in details page. $stateParams needs to be the same with the JSON array id but I can't print that on its template. I really appreciate any help. Thank you.
Services
angular.module('demo', ['ui.router']);
.factory('BookService', ['$http', function($http){
return {list: $http.get('data.json')}
}])
Routes
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/books');
$stateProvider
.state('books', {
url:'/books',
templateUrl: 'templates/books.html',
controller: 'BooksCtrl'
})
.state('books.detail', {
url: '/detail/:id',
templateUrl: 'templates/books-detail.html',
controller: 'BooksDetailCtrl'
});
}])
Controllers
.controller('BooksCtrl', ['$scope', 'BookService', function($scope, BookService){
BookService.list
.success(function(data){
$scope.books = data;
});
}])
.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'BookService',
function($scope, $stateParams, BookService){
$scope.selectedBook = BookService.find(BookService.list, $stateParams.id);
}])
JSON File(data.json)
{ "demo_site": [{
"id": "1",
"title": "Demo 1",
"summary": "Summary 1",
"body": "test demo 1",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}, {
"id": "2",
"title": "Demo 2",
"summary": "Summary 2",
"body": "test demo 2",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}]
}
Templates
books.html
<ul>
<li ui-sref-action="selected" ng-repeat="book in books.demo_site">
<a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
</li>
</ul>
<div class="detail" ui-view></div>
books-detail.html
<div>
{{selectedBook.title}}
</div>
I've edited your code a bit and it works now. The most important change is mocking the BookService by bookServiceMock (I added it because I don't have access to your service).
app.js
var app = angular.module('demo', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/books');
$stateProvider
.state('books', {
url:'/books',
templateUrl: 'books.html',
controller: 'BooksCtrl'
})
.state('books.detail', {
url: '/detail/:id',
templateUrl: 'books-detail.html',
controller: 'BooksDetailCtrl'
});
}]);
app.service('bookServiceMock', function() {
var books =[{
"id": "1",
"title": "Demo 1",
"summary": "Summary 1",
"body": "test demo 1",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}, {
"id": "2",
"title": "Demo 2",
"summary": "Summary 2",
"body": "test demo 2",
"image": "img/compress/placehold.jpg",
"source": "angular/source",
"demo_link": "http://github.com"
}];
this.getBooks = function() {
return books;
};
this.getBook = function(id) {
for (var i = 0; i < books.length; i++) {
if (books[i].id === id) {
return books[i];
}
}
return null;
}
})
app.controller('BooksCtrl', ['$scope', 'bookServiceMock', function($scope, bookServiceMock){
console.log('BooksCtrl');
$scope.books = bookServiceMock.getBooks();
}]);
app.controller('BooksDetailCtrl', ['$scope', '$stateParams', 'bookServiceMock',
function($scope, $stateParams, bookServiceMock){
$scope.selectedBook = bookServiceMock.getBook($stateParams.id);
}]);
books.html
<ul>
<li ui-sref-action="selected" ng-repeat="book in books">
<a ui-sref="books.detail({id: book.id})">{{ book.title }}</a>
</li>
</ul>
<div class="detail" ui-view></div>
Here is the plunkr: http://plnkr.co/edit/VJxlqguJZGrIutAFLCNc
How to display the following json in scroll bar using angularjs mvc
myjson whixh i get from api localhost:port/details using nodejs:
[
{
"id": 4,
"notes": "sdas 123",
"invoice": "232",
"objectType": "Customer",
"objectId": 5,
"dateCreated": "2015-09-29T22:54:06.000Z",
"dateModified": "2015-10-08T23:01:16.000Z"
},
{
"id": 10,
"notes": "sample Test",
"invoice": "123",
"objectType": "Customer",
"objectId": 5,
"dateCreated": "2015-09-30T06:38:52.000Z",
"dateModified": "2015-09-30T01:20:38.000Z"
}
]
Any help guys..?
yes i have started and tried like this :in my controller
my config as:
angular.module('customerdetails).config(['$stateProvider',
function($stateProvider) {
$stateProvider.
state('listCust', {
url: '/details',
templateUrl: "/customerdetails/views/listcustomer.client.view.html'
});
}
]);
my service:
angular.module('customer').factory('Customer',function($resource)
{
return $resource('/details');
});
my controller:
angular.module('customerdetails').controller('CustomerController', ['$scope', '$rootScope', '$state', '$stateParams', '$location', 'Authentication', 'Customer', 'InvoiceRefund', '$filter',
function ($scope, $rootScope, $state, $http, $stateParams, $location, Authentication, Customer, $filter) {
var cus = Customer.query(function() {
console.log(cus);
});
To display JSON data you can use follwoing syntax: {{variable | json}} in the template, but for that you need to assign $scope.variable = YOUR_JSON; in your controller code
I'm trying to learn and do at the same time application framework ionic + angular .
In the news tab does not display my list of information stored in an array.
Any help please...
Here is the code used :
This is my file app.js :
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider){
$ionicConfigProvider.navBar.alignTitle("center"); // centrar titulo de cada contenido de tab
$stateProvider
.state("app",{
templateUrl: "templates/app.html",
url: "/app",
abstract: true
})
.state("app.noticias", {
url: "/noticias",
views: {
"app-noticias":{
templateUrl: "templates/noticias.html",
controller: "noticiasCtrl"
}
}
})
.state("app.servicios", {
url: "/servicios",
views: {
"app-servicios":{
templateUrl: "templates/servicios.html",
controller: "serviciosCtrl"
}
}
})
$urlRouterProvider.otherwise("/app/noticias"); // Para cuando no encuentre nada se vaya a la pagina que se quiere mostrar por default
})
.controller("noticiasCtrl", function($scope)
{
var rawData = [{
"id": "34",
"City": "New York"
}, {
"id": "22",
"City": "Las vegas"
}, {
"id": "44",
"City": "Paris"
}, {
"id": "45",
"City": "Lyon"
}];
})
.controller("serviciosCtrl", function($scope)
{
})
noticias.html :
<ion-view title="Noticias">
<ion-content ng-controller="noticiasCtrl">
<ion-list>
<ion-item ng-repeat="item in rawData">
{{ item.city }}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Have you tried $scope.rawData? instead of var? Using scope will add it to the scope of the controller and will be reachable.