I have the data,
data = {
"items": [
{"value": "New", "id": 1},
{"value": "Open", "id": 2},
{"value": "Close", "id": 3}
],
"current": 2
}
I'm my template I loop through items, but want to access the current value while in the loop.
This doesn't work,
{{#each items}}
{{id}} - {{value}} - {{current}}
{{/each}}
From the fine manual:
Nested handlebars paths can also include ../ segments, which evaluate their paths against a parent context.
So you want to use {{../current}} to access the value of current in the parent context.
Demo: http://jsbin.com/iyofuq/1/edit
Related
The API to be invoked uses JsonPatch. The following is a sample JSON.
{ "hello": false
, "array1":
[ { "subarray": [ "k2", "k1"] }
, { "subarray": [ "k1"] }
]
}
I would like to update both the subarrays (elements of the array1). There could be N number of elements/items in array1 that I'm not aware of when calling this API.
Now I can do the following if I am aware of the the size of array1.
[{ "op": "add", "path": "/array1/0/subarray/0", "value": "gk" }]
[{ "op": "add", "path": "/array1/1/subarray/0", "value": "gk" }]
But since I'm not aware of the the size of array1, it does not seem that this can be achieved using JsonPointer. Is there something that can be done to do an update that targets all the elements of array1 (i.e all the subarrays) in one go? Something like this:
[{ "op": "add", "path": "/array1/*/subarray1/0", "value": "gk-new" }]
After invocation, the resulting subarrays should have an additional element "gk-new" in addition to what they have?
There is no wildcard support in JsonPatch or JsonPointer. Therefore, what is asked in the question is not possible.
I get a json file from outer link by ajax call. i want to check element is exists in this json file or not and get it if exists. because it changes every time and items increases or decreases. If I get item and this item not existing, I get error and the code not complete. i want to check this item json.children[1].children and json.children[2].children ,..... if exists.
{
"num": 1,
"name": "aa",
"properites": [
{
"name": "prop1",
"value": "value1"
}
],
"children": [
{
"num2": 1,
"name2": "name2",
"properites": [
{
"name": "name",
"value": "value"
}
],
"children": []
},
{
"name": 1,
"num": "1",
"attributes": [
{
"name": "name",
"value": "value"
}
],
"children": []
.......................... big json file
I have tried to get these Items and set in local storage to use in table by this:
localStorage.setItem("row1-item1", json.children[1].children);
localStorage.setItem("row1-item2", json.children[2].children);
localStorage.setItem("row1-item3", json.children[3].children);
localStorage.setItem("row1-item4", json.children[4].children);
localStorage.setItem("row2-item1", json.name[1].children);
localStorage.setItem("row2-item2", json.name[2].children);
localStorage.setItem("row2-item3", json.name[3].children);
localStorage.setItem("row2-item4", json.name[4].children);
the problem here is if json.children[4].children not existing the code not complete the next line and jump out of ajax call even if json.name[1].children is exists. I tried try/catch but not solved it
Try to use map
json.children.map((children,index)=>{
localStorage.setItem('row${index}-item${index}`, children);
}
Or you can use forEach or for loop instead of map.
I'm currently having an issue accessing nested objects that are referred to through numbers. I made a service call to retrieve a JSON object, and then mapped each field to another object. I'll be using this object to display each field in the HTML.
My problem is occurring when I reach the nested objects. Here's an example :
{
"name": {
"title": "mr",
"first": "something",
"last": "something"
},
"role": "something",
"projects": {
"0": {
"title": "something",
"account": "something",
"steps": {
"total": 30,
"completed": 28
},
"dueDate": "2021-07-19 09:00:00",
"status": "fine"
},
"1": {
"title": "something",
"account": "something",
"steps": {
"total": 10,
"completed": 5
},
"dueDate": "2021-07-20 09:00:00",
"status": "fine"
},
}
}
The projects field gets tricky when trying to display all projects in the HTML. At the moment, I've created a person variable initialized to an empty array, and I add all of the fields from t he subscription to it. To solve this problem, I figured I should create a separate variable such as projects: any = []; and then set it to a new field in the person variable. Then iterate through it using an *ngFor, and display every project. Something like this
<li *ngFor="let project of person.projects">
{{ project }}
</li>
However that approach still doesn't reach the nested fields. How do I access the numbered objects here, and generally iterate through all of the nested fields?
Any advice will be very helpful. Thank you in advance.
I think you are looking for the KeyValuePipe
You would use it like this:
<li *ngFor="let item of person.projects | keyvalue">
{{ item.value }}
</li>
But based on your comment on doing this for more nested values, it might be worth flattening the data a bit in the component to simplify the template logic.
I want to create a JSON API that returns a list of objects. Each object has an id, a name and some other information. API is consumed using JavaScript.
The natural options for my JSON output seems to be:
"myList": [
{
"id": 1,
"name": "object1",
"details": {}
},
{
"id": 2,
"name": "object2",
"details": {}
},
{
"id": 3,
"name": "object3",
"details": {}
},
]
Now let's imagine that I use my API to get all the objects but want to first do something with id2 then something else with id1 and id3.
Then I may be interested to be able to directly get the object for a specific id:
"myList": {
"1": {
"name": "object1",
"details": {}
},
"2": {
"name": "object2",
"details": {}
},
"3": {
"name": "object3",
"details": {}
},
}
This second option may be less natural when somewhere else in the code I want to simply loop through all the elements.
Is there a good practice for these use cases when the API is used for both looping through all elements and sometime using specific elements only (without doing a dedicated call for each element)?
In your example you've changed the ID value from 1 to id1. This would make operating on the data a bit annoying, because you have to add and remove id all the time.
If you didn't do that, and you were relying on the sorted order of the object, you may be in for a surprise, depending on JS engine:
var source = JSON.stringify({z: "first", a: "second", 0: "third"});
var parsed = JSON.parse(source);
console.log(Object.keys(parsed));
// ["0", "z", "a"]
My experience is to work with arrays on the transport layer and index the data (i.e. convert array to map) when required.
I have a little problem.. I've got this JSON data:
[
{
"students": {
"student_id": "2",
"student_school": "1",
"student_name": "Charles"
},
"parents": [
{
"parent_id": "2",
"parent_school": "1",
"parent_name": "Tim"
}
]
},
{
"students": {
"student_id": "3",
"student_school": "1",
"student_name": "Johnny"
},
"parents": [
{
"parent_id": "3",
"parent_school": "1",
"parent_name": "Kate"
}
]
}
]
The problem is that I try to call to my html page by angular:
{{student.student.student_name}}
Yeah it works but when I want to call the parents data it doesn´t...
{{student.parents.parent_name}}
Simply:
<div ng-repeat="student in data">
{{student.students.student_name}}
{{student.parents[0].parent_name}}
</div>
Or define function in scope called for example getParentDescription and than
<div ng-repeat="student in data">
{{student.students.student_name}}
{{getParentDescription(student)}}
</div>
Because parents is an array. You must specify the index (0 in your case). See the response here : How to get value from a nested JSON array in AngularJS template?
You can't access child scopes directly from parents. See the comment by Vittorio suggesting<ng-repeat="child in parent.children"/> also Binding to Primitives
I'm guessing student is from an ng-repeat where you go through each object in the array.
Take a closer look at your JSON. While "students": {} points to an object, "parents": [] points to an array. Fix your JSON and it'll be fine