I have been trying to find the reason why my Ionic template is not displaying JSON data. I just started working and reading on ionic framework and angularjs.
please bear with my newbie questions;
1.) what is the error or cause why the json record is not displaying on the HTML?
2.) I have seen plenty of code samples where the Json codes is written on the controller.js instead on the services.js. Which one is standard and safe?
3.) I am having doubts regarding my json output, Can someone please confirm if the format is correct.
You help on this is really appreciated,. thanks in advance
here is my Console status:
Objectconfig: Objectdata: Array[1]0: Array[1]0: Array[1]0:
Objectcapacity: "7"fuelcap: "120"
make: "Nissan"model: "LoadMaster II"platenumber: "TRG0122"
vehiclecode: "TRK0004"vehicleid: "8"wheelnumber: "10"
__proto__: Objectlength: 1__proto__: Array[0]
length: 1__proto__: Array[0]length: 1__proto__: Array[0]headers: (name)status: 200statusText: "OK"__proto__: Object
On my template/HTML file:
<ion-list id="vehicleInformation-list1" class=" " ng-repeat="recs in vehiclerecord">
<ion-item id="vehicleInformation-list-item1" class=" ">Vehicle Model
<span class="item-note">{{ recs.model }}</span>
</ion-item>
</ion-list>
My Controller file:
.controller('vehicleInformationCtrl', function($scope, $http) { // TIP: Access Route Parameters for your page via $stateParams.parameterName
// var _this = this;
$http.get('http://myurlsample.com/webserve/').then(function(vehicleinfo ) {
$scope.vehiclerecord = vehicleinfo.data;
console.log(vehicleinfo);
alert(JSON.stringify(vehicleinfo));
}).catch(function(vehicleinfo)
{
console.log(vehicleinfo);
});
})
my Route.js file contains:
.state('tabsController.vehicleInformation', {
url: '/vehicleinfo',
views: {
'tab4': {
templateUrl: 'templates/vehicleInformation.html',
controller: 'vehicleInformationCtrl'
}
}
})
Via Jsonview a record look like this;
[
[
[
{
vehicleid: "8",
platenumber: "TRG0122",
make: "Nissan",
model: "LoadMaster II",
capacity: "7",
fuelcap: "120",
wheelnumber: "10",
vehiclecode: "TRK0004"
}
]
]
]
If I'm reading your jsonview output correctly, it looks like there's a lot of nesting going on:
[[[{model: "LoadMaster II", ...}]]]
The ng-repeat you have there will only work if the $scope.vehiclerecord looks like this:
[{model: "LoadMaster II", ...}, ... ]
Note that this is simply an array of objects with no nested arrays like your jsonview output.
So the solution is to play with vehicleinfo.data from the http response until you have only an array of objects. Based on the jsonview you have there, this would work:
$scope.vehiclerecord = vehicleinfo.data[0][0];
Related
I have n number of records coming from backend as HTML in array. I need to display the HTML response as HTML in my view. I tried ng-bind-html , but it takes the last value. Need assistance.
$scope.res= "data": [
{
"jd": "<p>this jd1</p>"
},
{
"jd": "<li>this jd2</li>"
},
{
"jd": "<ul>this jd3</ul>"
},
{
"jd": "<p>this jd4</p>"
}
]
}
Html:
<div ng-repeat="item in res">
<div ng-bind-html ="item.jd">
</div>
You can use $sce.trustAsHtml. See the documentation here.
What you could do is:
Add this line in your controller:
$scope.trustAsHtml = $sce.trustAsHtml;
And update your HTML like this:
<div ng-bind-html ="trustAsHtml(item.jd)">
Note that you should probably start using Angular 6 instead of AngularJS
....
.state('books', {
url: '/book/chapter/:chap',
templateUrl: "views/chapter.html",
params: { chap: .........}
})
Hi!
I have a variable in a specific controller and I want to pass it's value into a param for routing. Eventually I want to change the value of that variable so that I can create new urls using this same route.
I'm using ui-router, as you may have noticed.
I'm also curious on how would you solve the following problem:
basically I want to open a specific chapter of a book, let's say chapter 5. Then I want to display at the left of the page a link for each remaining chapter, that's why I want to change the value of the variable. How would you solve this using ng-repeat?
I'm thinking of using getArticle (as shown below) to get a chapter number and then ng-repeat the remaining chapters with ng-repeat? Ideas?
angular
.module('BookLibrary')
.controller("ChapterController", ["$scope","stateParams", "ChapterControllerService", function($scope, $stateParams, ChapterControllerService){
$scope.chapterList = ChapterControllerService.chapters;
$scope.getArticle = chapterList[0].chapter;
}]);
chapterList looks like this:
chapterList = [
{
chapter: "1",
content: "Chapter 1 goes here"
},
{
chapter: "2",
content: "Chapter 2 goes here"
},
{
chapter: "3",
content: "Chapter 3 goes here"
}
];
There are multiple questions here so to start with your state parameters. In the state params you can declare default values for params in a state like so.
.state('books', {
url: '/book/chapter/:chap',
templateUrl: "views/chapter.html",
params: { chap: null}
})
This would default the value to null. Perhaps you always want to default to chapter 1? If that was the case you can use params: {chap: '1'} (since you are using strings).
To pass a value to the state there are multiple ways to do it. Assuming you are using ui-sref you can hand parameter values right in the link.
ui-sref="books({ chap: 3 })"
However you want to have a list of links from an object using ng-repeat. So you could do something like this
<ul>
<li ng-repeat="chapter in chapterList">
<a ui-sref="books({chap: chapter.chapter})">{{chapter.chapter}}</a>
</li>
</ul>
You've included $stateParams in your controller already so you just need to grab the parameter from it like so
angular
.module('BookLibrary')
.controller("ChapterController", ["$scope","$stateParams",
"ChapterControllerService", function($scope, $stateParams,
ChapterControllerService){
$scope.currentChapter = $stateParams.chap;
$scope.chapterList = ChapterControllerService.chapters;
$scope.getArticle = chapterList[0].chapter;
}]);
I'm still pretty new to AngularJS, but this concerns importing from a JSON document.
I have a list of guitars which I've made all as objects in my JS file (And had it all working correctly), and I use ng-repeat to have all of them display. Now, I want to place those objects in a separate JSON file.
HTML template:
<section id="guitarSections" ng-controller="GuitarCtrl">
<div id="guitarDivs" data-ng-repeat="guitar in guitars">
<img id="guitarImages" src="{{guitar.imageURL}}">
<div id="text">
<h2 class="information">{{guitar.title}}</h2>
<p class="information">Instrument: {{guitar.instrument}}<p>
<p class="information">Color: {{guitar.color}}</p>
<p class="information">Price: {{guitar.price}}</p>
</div>
</div>
<br>
</section>
JS
var app = angular.module("myApp", []);
app.controller("GuitarCtrl", function($scope, $http) {
var url = "data.json";
$http.get(url).then(function(response) {
$scope.guitars = response.data;
});
});
And a small sample of my JSON:
{
"guitars":[
{
"title": "Yamaha Revstar 420",
"brand": "Yamaha",
"instrument": "Electric Guitar",
"color": "Red",
"price": "$499.99",
"details": "Yes",
"imageURL": "YamahaRS420.jpg"
},
{
"title": "Yamaha Pacifica Series PAC012",
"brand": "Yamaha",
"instrument": "Electric Guitar",
"color": "Blue",
"price": "$",
"details": "Yes",
"imageURL": "YamahaPacificaSeriesPAC012.jpg"
}
]}
When I run it on a Python Server (python -m SimpleHTTPServer), the page loads, but none of the content will get imported over and it only shows one guitar section.
ADDITIONAL NOTE: I also inspected the Network, and in the columns with the names of the documents, I happened to notice, in red, '%7B%7Bguitar.imageURL%7D%7D'. Upon examining this, a page pops up and gives me a 404, which says:
Error code 404.
Message: File not found.
Error code explanation: 404 = Nothing matches the given URI.
Though I have checked and ensured that all of my documents' names are not misspelled and that each image can be imported.
First, you expect your JSON to contain an array of guitars, but it actually contains an object with a single attribute named guitars.
Second, you should use ng-src rather than src for your IMG element, to avoid this request to a non-interpolated URL.
Hello guys im struggeling with ionic and angular i build an news site view with menu points like this
ionic menu points
i wrote my news in an array
for example
http://plnkr.co/edit/ZWOHlCmZDxUkd4laWN4t?p=catalogue
.controller('NewsCtrl', function($scope) {
var items = [
{id: 1, news_item: 'NEWS EXAMPLE'}
];
});
how can i route the right path to the news_item.html site which i klicked on. so if i click on first one i get the tempalte with 'NEWS EXAMPLE'
I couldn't test my answer because your plunker is not working. I think you forgot the index.html file.
But I believe you should add to your items list the url to redirect your page :
.controller('NewsCtrl', function($scope) {
var items = [
{id: 1, news_item: 'NEWS EXAMPLE', template_url : '/path/to/template'}
];
});
Then you can add the path to a href in your <a></a> block.
Hope it will help
Change your variable to be $scope.links this will make it available in the view for repeating using ng-repeat. You can then access values in the JSON Object as setting your href value to the template_url.
.controller('NewsCtrl',function($scope)({
$scope.links = [{
id:1,
news_item: 'NEWS EXAMPLE',
template_url: '/path/to/template'
},
{
id:2,
news_item: 'NEWS EXAMPLE',
template_url: 'path/to/tempalte'
}];
})
<div class='rows' ng-repeat="link in links">
<a href='{{link.template_url}}' class='col' value='{{link.news_item}}' />
</div>
Hope this helps
Json file:
{
"id":"7",
"date":"1 Jan",
"images":["507f42c682882","507e24b47ffdb","507e2aeca02d5","507e2b19663a9"]
}
in my controller I have
$http.get('urlToJsonFile).
success(function(d){
console.log(d);
$scope.item = d;
});
in my partial view I can print the id and date but when it comes to printing the images, it just doesnt work. Im doing it wrong. Why isnt there any output? Do you know how to fix this problem?
{{item.id}}:{{item.date}}
<ul>
<li ng-repeat="img in item.images">
{{img}}
</li>
</ul>
It's working. See This JS Fiddle . Can you put your code in JSFiddle as to why it's not working for you ?
I've used your ajax response as hard coded collection.
'use strict';
var obj = {
"id": "7",
"date": "1 Jan",
"images": ["507f42c682882", "507e24b47ffdb", "507e2aeca02d5", "507e2b19663a9"]
};
function Ctrl($scope) {
$scope.item = obj;
}
There are some known issues with ng-repeat and iterating over primitive types. Check this issue on github .
If possible, try to use objects as your array elements.