How do I loop over a multidimensional array with ngFor in angular?

Ionic Framework Ionic Angular
1

suppose I have an object like this:

0: ["some string 1"]
1: Array(3)
    0: "some string 2"
    1: "some string 3"
    2: "some string 4"
    length: 3
    __proto__: Array(0)
2: ["some string 5"]
3: ["some string 6"]
4: ["some string 7"]

and the structure of it can change from one of the top level array indexes to a multidimensional array. So for example it could become:

0: ["some string 1"]
1: Array(3)
   0: "some string 2"
   1: "some string 3"
   2: "some string 4"
   length: 3
   __proto__: Array(0)
2: Array(4)
   0: "some string 5"
   1: "some string 6"
   2: "some string 7"
   3: "some string 8"
   length: 4
   __proto__: Array(0)
3: ["some string 9"]
4: ["some string 10"]

how would I loop over this using ngfor so that everything becomes top level, I want to display from 1 counting up to the last string number.
currently when I use a single ngfor it’ll create a element for array number 1 with comma seperated values

the output needs to look like:

<p>some string 1</p>
<p>some string 2</p>
<p>some string 3</p>
etc

While when using ngfor on a p tag like so:

<p *ngFor="let object of stringsArray">{{object}}</p>

for the strings object in the first example of this post it does this:

<p>some string 1</p>
<p>some string 2,some string 3,some string 4</p>
<p>some string 5</p>

To get this to work all I would have to do is move the second dimension to the first dimension of the array.

ANSWER:
This can be achieved with a simple spread operator in ES6 to concatenate the multidimensional array into a single dimensional one like so:

arr1d = [].concat(...arr2d);
2

I thing this is an Angular question rather than Ionic. Maybe this could help you https://stackoverflow.com/questions/54476613/processing-a-two-dimensional-array-in-angular-7-ngfor/54476842

And try to post your array en JSON to better understanding :wink:

3

Hi ThonyFD12,

I think you’re right, I’ll try to change the labels to angular.
I’ve already found a solution for my use case.

The answer you’ve posted does seem to work for multi dimensional arrays but is a somewhat uglier approach in my opinion than to use a spread operator in ES6.

Thank you for the suggestion, I’ll change it into JSON. Should this be displayed within the code tag as well?
What would the difference be between displaying this as a JSON object or as a Javascript Object though? I don’t really see how that would make a big difference :stuck_out_tongue:

In fact I actually find this easier to read. (Since it’s what I see in the chrome dev console)

EDIT: I can’t find a category of only Angular inside the ionic forums, perhaps this should be posted on stackoverflow instead. All I could find was Ionic Angular.

4

Yes use the code tag could help.

I’m really confuse with object you post, cause I don’t get if it’s an associative object or and simple array. My suggestion was only for improve my response. Maybe someone get it better than me

5

Yes, this is a forum specially for Ionic, people like me that works with angular could help you, but maybe in StackOverflow yo could get faster and better responses.

6

Could be both, that’s just a matter of using {} vs square brackets.
There aren’t separate concepts for an Associative Array vs Object.
In javascript this wouldn’t make a difference.

It’s a multi dimensional array but could also be a multi dimensional object.

See here for a explanation: