I have a website with JsRender and a JSON file.
My JSRender code:
{{for ~getModel(cards)}}
{{:id}}
{{/for}}
My JSON file:
{
"alpha": {
"cards": [{
"id": "alpha-01"
}, {
"id": "alpha-02"
}, {
"id": "alpha-03"
}]
},
"beta": {
"cards": [{
"id": "beta-01"
}, {
"id": "beta-02"
}]
}
}
In {{for ~getModel(cards)}} is cards, a suffix.
My JsRender helper concatenates a prefix and a suffix and the result is a string.
This string should be my array for the for loop. The suffix is a dynamic part, a parameter from the URL (?model=alpha)
The for loop should run through the array alpha.cards -> {{for ~getModel(alpha.cards)}}
But when I concate the dynamic part and the suffix, the return value is a string, and the for loop doesn't work. It seems the value (return) for the helper must be an array.
Is that right or is there a another solution for the problem?
Yes - you need to return an array. JsRender renders against javascript objects and arrays (typically a hierarchy of objects and arrays). If your string is a JSON string you need to convert/eval first to produce the corresponding object or array...
Related
Im trying to filter the elements of this JSON array to return only the first element it will find.
{
"elements": [{
"urn": "urn:li:lyndaCourse:189800",
"details": {
"classifications": [{
"associatedClassification": {
"urn": "urn:li:lyndaCategory:9331",
"type": "LIBRARY"
}
},
{
"associatedClassification": {
"urn": "urn:li:lyndaCategory:8982",
"type": "SUBJECT"
}
},
{
"associatedClassification": {
"urn": "urn:li:lyndaCategory:8920",
"type": "LIBRARY"
}
}
]
}
}]
}
But this results in an EMPTY array [].
I tried this JSONPATH query in https://jsonpath.herokuapp.com/
$.elements[0].details.classifications..associatedClassification[?(#.type=='LIBRARY')][0]
Expecting to get:
[{
"urn": "urn:li:lyndaCategory:9331",
"type": "LIBRARY"
}]
Another way to filter the information is by filtering the property "classification" (without using ".."), and use "associatedClassification.type" in your filter, so you should have something like this:
$.elements[0].details.classifications[?(#.associatedClassification.type=='LIBRARY')]
With the above JSONPATH you will have all items which type is "LIBRARY" (in your example will return 2 items).
You mentioned you need only the first one of the filtered items, as far as I investigated it seems there's no posible solution to return only the first item using only JSONPATH (see the thread bellow):
https://github.com/json-path/JsonPath/issues/272
The following works on all elements:
$..classifications[?(#.associatedClassification.type=='LIBRARY')]
and returns a list of all matching associatedClassification objects.
JSONPath is expected to point inside the original document. Therefore, getting the first element from the result list would require post-processing, e.g. a separate JSONPath, e.g.
$.[0]
I'm building a ReactJS web application, I have a JSON array:
[{
"2149166938": {
"name": "Classical-42",
"icon": "/common/destiny2_content/icons/e6885dab15cafeaf0dbf80f1ff9b5eb8.jpg"
},
"2149166939": {
"name": "Countess SA/2",
"icon": "/common/destiny2_content/icons/de8906743db9fce201b33802c8498943.jpg"
},
"2154059444": {
"name": "The Long Goodbye",
"icon": "/common/destiny2_content/icons/fe07633a2ee87f0c00d5b0c0f3838a7d.jpg"
}
}]
When I make a call to an API I am returned a value of lets say 2154059444 which is the same value as the last object in my JSON file.
How would I iterate through the JSON file to find the object which has a value of 2154059444 and then access and render it's child values like name or icon?
you can do something like this. Your array is not proper please edit.
Create filtered data :
//here i am addding single dummy point you can make your function
l
et filteredData = [].concat(data.map(test => {
if(Object.keys(test)[0]==="2154059444"){
return test["2154059444"]
}
})).filter(Boolean)
and simply render it app like this .
{ filteredData.map(test => <div>{test.name}</div>)}
Here is live link
This is simple. JSON is equivalent to Javascript object. So you can do something like result[0]["2154059444"]. You might want to use JSON.parse for converting the JSON string to Javascript object.
I am new to Ionic 3 & Angular and ran into an issue with *ngFor and .subscribe() method. Please forgive me if it is an easy question. I tried to figure out the behaviour of http.get(..).map(..).subscribe() function when used along with *ngFor to maintain an array of objects and show the records to user using *ngFor on the .html template file but unable to know *ngFor's odd behaviour.
In my Ionic 3 App, I am getting the data using an API and storing it inside a component variable called "users" which is declared as below in component .ts file -
users: Array<any>;
I have below component function which gives me data for this users array -
addUser(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.users.push(val);
}
})
}
Initially, I get data for 10 users from the API using above component function by simply calling it inside my ngAfterViewInit() function like -
this.addUser(10);
This gives me 10 user record objects inside my users array which I show to the user using something like below in the view .html file -
<ion-card *ngFor="let user of users">
{{user.email}}
</ion-card>
At this time *ngFor puts the last array element at first in the view and shows the records in the descending order as the elements in the array starting from index 9 to 0.(LIFO order)
Now I start popping the last element from this users array using users.pop(); and push another element at the beginning at index 0 by shifting current elements using users.unshift(..) in below function and calling it as addNewUser(1); -
addNewUser(count: number) {
this.http.get('https://randomuser.me/api/?results=' + count)
.map(data => data.json().results)
.subscribe(result => {
for (let val of result) {
this.users.unshift(val);
}
})
}
At this moment, if we consider the first array which had 10 elements, the last object at index 9 had been removed and another element at index 0 has been added making the previous elements on index 0-8 to shift to index 1-9.
On doing so, my view gets updated which has *ngFor and surprisingly this time it shows the first element at first place which is actually on index 0 which is the one I recently put. This is opposite to the order earlier followed by *ngFor to render elements on the screen.
Why *ngFor in Ionic 3 view shows the recently inserted object element first from the array of objects which is dependent on the subscribe method .subscribe() method. I am really confused about this.
I really need to clear the concept of *ngFor and subscribe(). Please help me.
Note : The API mentioned above is publicly accessible for testing and you may call it to check the response structure if required.
Pasting a sample API response below on calling https://randomuser.me/api/?results=1 -
{
"results": [
{
"gender": "male",
"name": {
"title": "mr",
"first": "daniel",
"last": "stoll"
},
"location": {
"street": "9719 tannenweg",
"city": "cottbus/chosebuz",
"state": "bremen",
"postcode": 81443
},
"email": "daniel.stoll#example.com",
"login": {
"username": "greenleopard994",
"password": "chat",
"salt": "OUjisBdQ",
"md5": "8148d51998f3fef835a5f3979218c181",
"sha1": "131ae09d045b345efe36a330bf17a450b76f7de3",
"sha256": "94c3a362b5f516d0fb1d4e9dbb632d32d57b8886d5cc7bf0d5cedc99e7d55219"
},
"dob": "1957-04-26 22:07:14",
"registered": "2002-04-29 10:57:34",
"phone": "0556-4348870",
"cell": "0172-5116200",
"id": {
"name": "",
"value": null
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/14.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/14.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/14.jpg"
},
"nat": "DE"
}
],
"info": {
"seed": "8fd4afe85884c767",
"results": 1,
"page": 1,
"version": "1.1"
}
}
Refer this example showing my issue.
If you have a sorting issue with indexing and you think it's related.. you could work around the issue by assigning an index:
*ngFor="let user of users; let i = index"
and then reference the direct index value
users[i]
You should make a copy of that array. Editing array elements while looping them can lead to unexpected behaviour.
I have a json data like below
{
"data": {
"points": 390,
"medal": "gold",
"activeGoals": [{
"examType": full,
"dateApplied": null,
"status": "Active-GoodStanding",
"term": 2,
"amountPaid": 2500,
"pointEarned": null,
"examDetails": {
"totalAmountPaid": 4500,
"examDate": 1459449000000,
"endDate": 1554057000000,
"totalMarks": 100,
"nextExamDate": 1493577000000,
"interestRate": 0
}
}]
}
}
In this Json data there is 'activeGoal' array,and inside of that there is an another array 'examDetails'
In Controller,I tried assigning these data into the angular object like below
examCtrl.details ={};
examCtrl.details =data;
examCtrl.activeGoals=data.activeGoals;
examCtrl.examDetails=data.activeGoals.examDetails;
I am getting activeGoals, but for examDetails I am getting 'undefined' error.
What is the wrong i am doing here??
assign like this : examCtrl.examDetails=data.activeGoals[0].examDetails;
since activeGoals is itself an array and you need first index([0]) value of it i.e., examDetails.
Further: as per your JSON examDetails is object not array.
if you're confused what the exactly the data is you can always convert in JSON editor.then you can easily assign the object from JSON data.
I have an array that looks like this:
[{
LocalBond:"0",
LocalCash:"2.42",
LocalEquity:"0",
ForeignEquity: "4",
...
}]
What I want it look like:
[{
Source: "LocalBond",
Value: "0"
},
Source: "LocalCash",
Value: "2.42"
},
Source: "LocalEquity",
Value: "0"
},
{...}
]
I want to turn a single object into many objects. I also need the exclude the 'ForeignEquity' result.
I tried using _.map, and returning the fields I want, but I am struggling a bit. Am I on the right track? When I pass more than one parameter into my function, I don't get the desired result.
The most simple code is pure javascript:
Using for..in access to the property of the object, and inside of the for loop build the array.
http://www.w3schools.com/jsref/jsref_forin.asp
Example:
https://jsfiddle.net/jewrsL8a/5/
var collection = [{
LocalBond:"0",
LocalCash:"2.42",
LocalEquity:"0",
ForeignEquity: "4"
}];
var result = [];
for (var property in collection[0]) {
if(property!=='ForeignEquity'){
result.push({'Source': property, 'Value': collection[0][property]});
}
}
console.log(result);