Display this to list

Ionic Framework ionic-v3
1 
test.ts:113 (6) [Status, Status, Status, Status, Status, Status]
test.ts:139 (4) [Array(1), Array(1), Array(1), Array(1)]     // I want to display this first in a list
test.ts:139 (4) [Array(1), Array(1), Array(1), Array(1)]  // then this
test.ts:139 (4) [Array(1), Array(1), Array(1), Array(1)] // then this
test.ts:139 (4) [Array(1), Array(1), Array(1), Array(1)] // then this
test.ts:139 (4) [Array(1), Array(1), Array(1), Array(1)]  // then this
test.ts:139 (4) [Array(1), Array(1), Array(1), Array(1)] //  and the last one

how to do display this to list?

It is a forEach function

I can only display the the last one. the last output

This is an example from https://docs.microsoft.com/en-us/scripting/javascript/reference/foreach-method-array-javascript



// Define the object that contains the callback function.  
var obj = {  
    showResults: function(value, index) {  
        // Call calcSquare by using the this value.  
        var squared = this.calcSquare(value);  

        document.write("value: " + value);  
        document.write(" index: " + index);  
        document.write(" squared: " + squared);  
        document.write("<br />");  
    },  
    calcSquare: function(x) { return x * x }  
};  

// Define an array.  
var numbers = [5, 6];  

// Call the showResults callback function for each array element.  
// The obj is the this value within the   
// callback function.  
numbers.forEach(obj.showResults, obj);  

// Embed the callback function in the forEach statement.  
// The obj argument is the this value within the obj object.  
// The output is the same as for the previous statement.  
numbers.forEach(function(value, index) { this.showResults(value, index) }, obj);  

// Output:  
//  value: 5 index: 0 squared: 25  
//  value: 6 index: 1 squared: 36  
//  value: 5 index: 0 squared: 25  
//  value: 6 index: 1 squared: 36

I want all this outputs to display in list. I can only display the last one with: This is an example

<ion-item *ngFor="let some of something" ></ion-item>
2

Throw away that Microsoft foreach reference and never look at it again. It’s completely antithetical to how Angular expects you to program.

ngFor wants to walk across an array. You say you want to display six elements in a list. I can’t figure out what they are supposed to be from a bunch of Array(1), but what you are going to have to do is declare an array property in your controller code and populate it with whatever these six elements are that you want to show. Angular will take care of the rest. forEach() is a control flow concept, and in an Angular app you are not really in charge of the control flow, so it’s generally not a very idiomatic way of doing things.

4

I use forEach in providers, when I’m modifying arrays. But providers don’t have an html template. So my position isn’t as extreme as that of @rapropos. Basically, I see every Angular page as a reactive form, so programming Angular pages has to be reactive. But in the background, it’s possible to use procedural blocks, as long as the provider doesn’t release data to pages until the data is ready. (In other words, it’s possible to direct control flow at choke points, like into and out of a provider.)

5

I agree with @rapropos, ForEach() is just not working well with Ionic. If you have to loop over a set of values in an Array, you can also use plain old school JavaScript like this:

for (var i=0; i<this.myArray.length; i++) { 
// do something
}

I know it’s ugly, old, but if your Array is well limited, it’s reliable.

Hope it helps

6

To clarify, my beef here is not with Array.forEach() per se, but rather with the specific resource quoted, because it suggests thinking in terms of imperatively adding things to the DOM. That conflicts with idiomatic Angular code, in which we should think in terms of building up data in a format that is easy for templates to consume.

Hence, I would prefer map() to either forEach() or a manual loop using push().

7

Thanks @rapropos, there is something rather unclear with Ionic and its TypeScript compability for me. Like, does something referenced in TypeScript 2 will work in Ionic, if this is specified within Angular API or just random? (because of my current project build and dependencies).

8

I didn’t read the OP’s link, so you caught me out there. But I don’t quite follow this, maybe because I’ve never used map(). Since I construct immutable arrays, I tend to use the spread operator, splice and filter, or use forEach when initializing from the ground up. How might use of map() be better?

9

I guess it comes down to tone and atomicity. I agree with you that as long as all the sausage-making is confined to provider methods, consumers can think of these arrays as springing forth fully-formed no matter how that really comes about.

However, given the following three functionally identical phrasings, I find the third clearest:

let newar = [];
for (let i = 0; i < oldar.length; ++i) {
  newar.push(frobulate(oldar[i]));
}

let newar = [];
oldar.forEach(elem => newar.push(frobulate(elem));

let newar = oldar.map(elem => frobulate(elem));

In either of the first two, newar is in an uncompleted and unusable state until everything has finished. With map() it’s either empty or full; no intermediate state.

Similarly, as a reader I say to myself “ok, we are making something called newar. now we are looping across oldar and oh i see we’re pushing new elements onto newar”. That’s not as direct of an expression of the idea of data-transformation as map() is to me. foreach() to me is primarily designed for doing something to each element of an array, as opposed to map() which is about building something from each element of an array.

3 Likes