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.
Related
I am unable to print the value in HTML for below code in angular js, can any one help on this?
angularjs controller code :
$scope.arr=[new Map().set("MYKEY","MYVALUE")];
html code :
{{arr}}
Can any one tell how to display this using angular js tags in html.
You should use $scope.arr to access data from DOM.
Angularjs controller code :
$scope.arr = [new Map().set("MYKEY","MYVALUE")];
Html code:
{{arr}}
Its done by---> Amruth
Thank You Amruth...!!! It was really helpfull........!!!!
I have tried below code its working, please check it once.
Angularjs code:
$scope.DATA = [];
var arr =[new Map().set("MYKEY","MYVALUE")];
angular.forEach(arr, function (iterate) {
angular.forEach(iterate, function (value, key) {
$scope.DATA.push( { key : key, value : value } );
})
});
Html code:
<ul>
<li ng-repeat='(key, value) in DATA'>
<span>Key: {{value.key}}</span>
<span>value: {{value.value}}</span>
</li>
</ul>
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];
I am pulling xml into an angular app using x2js. I want to mix html into the content of certain elements, but this is making it difficult to pull that data back out for display. Here is an example of the xml.
<data>
<title>Some title here</title>
<desc>This is my <b>description</b></desc>
</data>
Using x2js I get this object
{"data": {
"title": "Some title here",
"desc": {
"b": "description",
"__text": "This is my"
}
}}
Since I can't use desc as is, I decided to write some code to work around it.
$scope.getText = function(csspath) {
return $($scope.rawXmlData).find(csspath);
}
Finally I bound the object to the scope and made my angular code do this.
<h1 ng-bind="data.title"></h1>
<p ng-bind-html="getText('data > title')"></p>
Angular responded by getting furious and told me this.
Error: $parse:isecdom
Referencing a DOM node in Expression
Is there a better way to achieve my goal? (besides switching to markdown since the client wants html sigh)
Not entirely sure why you are getting that error. However, by default angular will not allow you to print any html-string. You will have to "approve" your html by using $sce.trustAsHtml method.
Example
angular
.module('app', [])
.run(function($rootScope, $sce) {
$rootScope.getHtml = function(html) {
return $sce.trustAsHtml(html)
}
})
HTML
<!-- will not work -->
<p ng-bind-html="'<h1>a222sd</h1>'"></p>
<!-- will work as it is ran through $sce.trustAsHtml -->
<p ng-bind-html="getHtml('<h1>asd</h1>')"></p>
Live example http://jsbin.com/keraqazapo/edit?html,js,output.
UPDATE
Well, the error is below. ng-bind-html does only take a html-string to render. What you are doing here is that you, by jquery, return a dom element. Which is not allowed.
$scope.getText = function(csspath) {
//Returns dom element
//should return value of $sce.trustAsHtml
return $($scope.rawXmlData).find(csspath);
}
Alright, so the following below that I've tested in code works:
javascript:
var string = '<p>hello</p>';
$scope.html = $sce.trustAsHtml(string);
html:
<span ng-bind-html="html"></span>
The thing I'm really trying to do is this: Pulling a bunch of items from the server in JSON form. One of the JSON's key is called "description", which is just a long string of html code.
I'm pushing these items into a $scope array so I can show them on the page through an ng-repeat directive. The code below summarizes how it's being done:
javascript:
$.getJSON('someURL', function(data) {
$scope.items = [];
for (var i = 0; i < data.count; i++) {
var item = {};
item.description = $sce.trustAsHtml(data.item[i].description);
$scope.items.push(item);
}
});
html:
<p ng-repeat="item in items">
<span ng-bind-html="item.description"></div>
</p>
This isn't producing any output for some reason. Something I read was that whatever variable you bind the $sce.trustAsHtml() to must be a $scope variable. In this case, I'm setting it to a regular variable "item.description" and then adding it to a $scope.item array.
I suspect this may be why it's not working, but I don't know how to go about fixing it.
Can anyone help with this?
Thanks!
Try <span ng-bind-html="'{{item.description}}'"></span>.
Something like this worked for me.
With AngularJS 1.4.9 it worked for me like this:
Controller:
.controller('MyCtrl', ['$scope', '$sce',
function($scope, $sce) {
$scope.infoText = $sce.trustAsHtml('My <strong>HTML text</strong>');
}
])
Template:
<span ng-bind-html="infoText"></span>
I have been trying to pass my sse data in the angular's data but it just won't display. Here is how I tried:
(my view)
<body ng-app>
<div ng:controller="Main">
<ul>
<li ng:repeat="item in items">
name:{{item.name}},age:{{item.age}}
</li>
</ul>
</div>
</body>
(angular script)
var source = new EventSource('/feedcontain/test');
function Main($scope) {
$scope.items = [];
source.addEventListener('right', function(e) {
$scope.$apply(function() {
$scope.items.push(e.data);
});
},
false);
}
(/feedcontain/test)
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: [{name:'john', age:23}, {name:'Mary', age:28}, {name:'Sean', age:28}] \n\n";
I wanted to display name:john, age:23 but it returns empty. I am trying to create something after I change the data or add then it will push to angularjs. Any idea? Thanks a lot.
If the event is ever happening, you end with an name:,age: result. All you should do then is to concat instead of pushing, as you're receiving an array.
$scope.items = $scope.items.concat(e.data);
Keep in mind that the $scope.items reference will change, what will not break Angular, but might breake any other references to it. If you need it to not change, use a for to push each element.