I've got a problem to loop a simple json in angularjs with ng-repeat. The json is this one:
$scope.lines = {
data: [
{ "properties": {
"name": "My test",
"test:testOne": "This is test one" }
}
]
};
and the problem is this: test:testOne. I need to parse that property but i don't know how do it because it has the colon. I made a jsfiddle here: http://jsfiddle.net/7MhLd/1250/ in which i tried some ways but without success
You can use [] bracket notation, like so
<div ng-controller="MyCtrl">
<div ng-repeat="line in lines.data">
{{ line.properties['test:testOne'] }}
{{ line.properties.name }}
</div>
</div>
Example
Related
I have the following data:
[...]
data() {
return {
theme: "dark",
data: {
ioa: [
{
title: "xyz1",
applications: ["app1","app2","app3"],
},
{
title: "xyz2",
applications: ["app1","app2"],
},
],
applications: {
app1:{
name: "app1",
},
mastodon:{
app2: "app2",
},
app3:{
name: "app3",
},
}
}
}
},
[...]
<!--
First i loop thow the ioa array in data json object an print it with vues text template syntax
-->
<div v-for="item in data.ioa">
{{ item.title }}
<!--
for every element i will loop again throw the applications array in this object.
-->
<div v-for="id in item.applications>
<!--
in "id" there is a specific name, that is also the json key of the application object in data.
But when i want to print the title my application will show nothing
-->
{{ data.applications.id.name }}
</div>
</div>
The Problem is that i can now access the "application" object, with the returned "id" in text template syntax
The browsers console says: "Uncaught TypeError: data.applications.id is undefined". I know there is a problem with "id" which is a string ... but i dont know how to solve this.
I want to get the value of "application" json object, based on the return id value from data.ioa json object
While you inside the v-for item.applications the data should call as id not data.applications.id.name
Answer here >>> Full Answer
I'm fetching a list that I'm trying to loop through that has an object inside. I'm using vue and the array looks like this:
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: "{"funder":"blabla","idType":5,"number":"2"}"
]
My problem is accessing the different ones inside the additionalData.
This is how far I've come:
<div
v-for="(company, idx) in companies"
:key="idx"
>
<p class="font-weight-bold text-h6"> {{ company.name }} </p>
<p class="font-weight-bold"> {{ company.additionalData.funder }} </p>
</div>
This doesn't work and I've tried a loop inside the loop aswell. When I only print out {{ company.additionalData }} I get the whole object. Can it have something to do with that the object is inside a string? Could I do a computed or something to figure this out or? :)
It looks like additionalData is a string containing JSON, so try converting the string to an object. Something like this should work:
<p class="font-weight-bold"> {{ JSON.parse(company.additionalData).funder }} </p>
Yes, you're right, you can't access json properties with dot notation in html. You can fix that with JSON.parse, which will turn your JSON object into a JavaScript object that you can access the properties of in your template.
companies: {
name: "company1"
id: 1
type: "finance"
additionalData: JSON.parse("{"funder":"blabla","idType":5,"number":"2"}")
}
Syntax problem
companies: [
name: "company1"
id: 1
type: "finance"
additionalData: {
"funder": "blabla",
"idType": 5,
"number":"2"
}
]
I am iterating through an array of person objects using ng-repeat Say the array looks like this:
[{
"display_name": "John Smith",
"status": "part-time",
"bio": "I am a person. I do people stuff.",
}, {
"display_name": "Jane Doe",
"status": "full-time",
"bio": "I am yet another person.",
}, ...]
Meanwhile, I have another number_list object that looks like this (note the uppercase):
{
"JOHN SMITH": 12,
"JANE DOE": 34,
...
}
In the HTML, I am able to interpolate from each person object like so:
<p>
Person Name: {{ person.display_name }}
Person Bio: {{ person.bio }}
...
</p>
But I'd also like to interpolate from the second object, accessing the value where the key matches the person object I'm on, like so:
<p>
...
Person Number: {{ number_list['{{ person.display_name | uppercase }}'] }}
</p>
I am using the EMCAScript Bracket notation rather than the dot notation to specify the key, because of the spaces in the key names of number_list (e.g."JOHN SMITH") but I get nothing out of that interpolation.
I have confirmed that if I type in a name e.g. {{ number_list['JOHN SMITH'] }} that I am able to interpolate the value -- 12 in this example. This means the issue doesn't have to do with scope or anything like that as far as I can tell.
Nested interpolation with double curly braces ({{ }}) is not supported by the AngularJS framework. If you want to run more complex code, you should make it a controller method and call the method from your view.
<p ng-repeat="person in persons">
...
̶P̶e̶r̶s̶o̶n̶ ̶N̶u̶m̶b̶e̶r̶:̶ ̶{̶{̶ ̶n̶u̶m̶b̶e̶r̶_̶l̶i̶s̶t̶[̶'̶{̶{̶ ̶p̶e̶r̶s̶o̶n̶.̶d̶i̶s̶p̶l̶a̶y̶_̶n̶a̶m̶e̶ ̶|̶ ̶u̶p̶p̶e̶r̶c̶a̶s̶e̶ ̶}̶}̶'̶]̶ ̶}̶}̶
Person Number: {{ ::personNumber(person.display_name) }}
</p>
$scope.personNumber = function(name) {
return $scope.number_list[name.toUpperCase()];
};
You can also use filter to personNumber for an object:
app.controller("ctrl", function($scope){
$scope.persons = [...];
$scope.number_list = [...];
})
app.filter("personNumber", function(){
return function(array, name){
return array[name.toUpperCase()];
}
})
<p ng-repeat="person in persons">
...
Person Number: {{person.display_name | personNumber: number_list}}
</p>
I have data:
data = {
"laptop": [
"dell",
"hp",
"lenovo",
"acer",
"asus"
],
"mobile": [
"lenovo",
"motorolla",
"apple",
"samsung"
]
}
I am trying to display it in the table using the ngFor for displaying the data in the below format
But I am unable to get the data in the below rather than I am getting only data in the traditional format leaving laptop,mobile keys
is there any way to do that in the template
Stackblitz demo
is there any alternative approach or better becoz in future i may get n rows for the table
If you are using angular 6.1 you can use keyvalue
<div *ngFor="let title of data | keyvalue">
{{title.key}}
</div>
Example :https://stackblitz.com/edit/keyvalue-pipe
You can use this :
get dataKeys() { return Object.keys(this.data); }
This will create an array of the keys of your object.
You can now use a loop on it :
<div *ngFor="let key of dataKeys">
<div *ngFor="let item of data[key]">...</div>
</div>
My data called from a JSON is very simple.
I want to filter all data where the id of events is 13
My json provides from [...] $scope.things = things
[
{
"id":"1",
"title":"title1",
"events":[
{"id":"11",
"events11"},
{"id":"12",
"events12"}
]
},{
"id":"2",
"title":"title2",
"events":[
{"id":"11",
"events11"},
{"id":"13",
"events13"}
]
}
]
I try to display with :
<ion-item collection-repeat="thing in things | filter:{events.id:'13'}">
{{thing.id}}
</ion-item>
Very 1st thing you need to correct you JSON format, like events11, events12 & events13 should be key value pair like such "events": "11", "events": "12" & "events": "13".
Then you could use deep filter like below.
Markup
<ion-item collection-repeat="thing in things | filter:{events: {id:'13'}}">
{{thing.id}}
</ion-item>
Plunkr here
You could filter directly in the controller when instantiating the scope variable:
$scope.things = things.filter(obj => obj.id==='13');
You could try it with ng-if and a helper function:
<ion-item collection-repeat="thing in things" ng-if="getEventInThing(thing, '13')">
{{thing.id}}
</ion-item>
The following function will return the event with the given id, if present:
$scope.getEventInThing = function(thing, eventId) {
return thing.events.find(function(event) {
return event.id===eventId;
});
}
<ion-item collection-repeat="thing in things">
<span ng-repeat="event in thing.events" ng-if="event.id='13'"
{{thing.id}}
</ion-item>
Basically two loops with an ng-if for the inner loop to check if the even's id is 13.