I have a following consoled list of array how can i display the list?
I tried
this.item = this.data.["0"] // this is throwing an error
is there any other workaround to achieve this?
You have an array in an array. To display the list, you have to loop over the items in the array. Because your output is an array in an array, you can start the loop from the first element of the outer array.
Example:
<ion-list>
<button ion-item *ngFor="let item of items[0]">
{{ item.item_id }}
</button>
</ion-list>
Assuming your parent array is called data you can access the first element by using this.data[0]. You can also do other things such as loop over the items in the array, etc.
Related
I am currently using an entityset(i.e, "SolutioningVersions") in my smarttable which i have expanded in controler using
var mBindingParams = oEvent.getParameter("bindingParams");
mBindingParams.parameters["expand"] = "TEAMID/TEAMDETAILS,SOLREQ,SOLESTIMATE";
I have bound it in my table using
<VBox items="{ path: 'SOLESTIMATE', templateShareable:false }">
<Text text="{WBSVARIANT}"/>
</VBox>
But "SOLESTIMATE" is having array of objects & i want to show only "WBSVARIANT" from it 1st object in array.
Currently it shows me like this in single cell of table
enter image description here
I want to show only 1st element of this array. Also, i dont want to filter array here as objects are not unique.
A formatter can help you:
<Text text="{path: 'WBSVARIANT', formatter: '.formatText'}"/>
function formatText(items){
return items[0];
}
Suppose, I want to render 3 buttons which are mapped from Array
export const homePage = soruces => {
const array$ = xs.fromArray([1,2,3])
return {
DOM: array$.map(e => {
return <button id={e}>click</button>
})
};
};
but I only get the lastest button which has id of 3
<div id="app">
<button id="3">click</button>
</div>
how do i get all the buttons rendered like this using xstream or rxjs
<div id="app">
<button id="1">click</button>
<button id="2">click</button>
<button id="3">click</button>
</div>
That depends a bit on what you want to achieve. The code you have there basically says: "I get three pieces of data, each at some arbitrary point of time" (because fromArray basically takes the data from the array one by one and puts it into the stream.
If you now what to collect the data over time, you can add fold((buttons, newButton) => buttons.concat(newButton), []).
If however you just happen to have three poeces of data, that always should be three buttons, do not use fromArray but the normal Array.map. You can then use xs.of to emit the three buttons at once (compared to one by one in the first part)
I am developing an Ionic application (v.4 final release)...
My problem:
I have an <ion-select> and this select has a list of <ion-select-option>, and this options was created doing *ngFor... the problem is: when I change the array, remove an element, for example, the ionc-select-options cannot re-render the new status of this array.
<ion-select>
<ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>
(I am updating questions array)
Any ideas?
UPDATE:
If a put the *ngFor in other element, like a div, it works fine:
example:
(It is no updating when I delete the first element)
<ion-select>
<ion-select-option *ngFor="let question of questions">{{ question }}</ion-select-option>
</ion-select>
<button (click)="deleteFirst()>Delete first!</button>
(It is updating when I delete the first element)
<div *ngFor="let question of questions"></div>
<button (click)="deleteFirst()>Delete first!</button>
class MyComponent() {
public questions = ['question1','question2','question3'];
deleteFirst() {
this.questions.splice(0, 1);
}
}
You are using splice method alters the content of an array but doesn't change its reference.
In other words, you should work with immutable objects/Array, and create new instances when you need to make a change.
In your case :
deleteFirst() {
if (this.questions.length) {
this.questions = this.questions.filter((el, index) => index > 0);
}
}
Here filter returns a new reference to an array containing objs that fulfill a condition
I have data in array where every element represents parent object, and every parent object has items array, whose elements are children. I have to generate on HTML parents list + nested children list under every parent. Every child element is clickable (navigates to another page). Something like on image. Any help here? I can use *ngFor to iterate first level elements (parents) and use ion-list and ion-item but how to nest children?
You can basically do a nested *ngFor.
Example data:
var categories = [
{
"name": "Category 1",
"items": [
"item1"
"item2"
]
}
];
Example template:
<div *ngFor="let category of categories">
<h2>{{category.name}}</h2>
<ion-list>
<ion-item *ngFor="let item of category.items">{{item}}</ion-item>
</ion-list>
</div>
At the top-level you iterate your categories, and for every single category, you iterate its items.
I have a form in which I have a multiple select field. Options for this select field are populated from received data e.g. Tasks objects.
[
{"id":7,"title":"Seven","project":1},
{"id":8,"title":"Eight","project":2},
{"id":9,"title":"Nine","project":2}
]
and my select field:
<ion-list>
<ion-item>
<ion-label>Select tasks</ion-label>
<ion-select formControlName="tasks" multiple="true" (ionChange)="arrangeSelectedTasks()">
<ion-option *ngFor="let task of tasks" value={{task}}>{{task.title}}</ion-option>
</ion-select>
</ion-item>
</ion-list>
the function
arrangeSelectedTasks(){
for(let task of this.addScenarioForm.value.tasks){
this.selectedTasks.push(task)
}
console.log("selectedTasks: ", this.selectedTasks)
}
expects an array of task objects
Where value={{task.id}} passes ["7", "8"] and value={{task}} passes ["[object Object]", "[object Object]"]
This results in my backend throwing BAD REQUEST error. I want to pass something like [{..},{..}] this from value.
How to achieve this?
Use it .map
selectedTasks:any = [];
arrangeSelectedTasks(){
this.addScenarioForm.value.tasks.map(task => {
this.selectedTasks.push({task.id});
});
console.log("selectedTasks: ", this.selectedTasks)
}