*ngfor for nested arrays?

Ionic Framework
1

hi,
i have an arry with subarrays:

let xxx = [

{

    country: "germany",

    cities: [

        "berlin",

        "munich"

    ]

},

{

    country: "germany",

    cities: [

        "berlin",

        "munich"

    ]

}

]

now i want to list only the cities in a list not the country … ngfor doesnt seem like a good fit for that

so my two options are :

  1. ditch ngfor and just populate the list with two nested for loops and create the ion-items on the fly with vanilla javascript

or

create anotehr array with the same two nested for loops and use that array for ngfor , but then it will be quite hard to get the actual array data on the original array for each list entry with a click listener , which is otherwise easy

if anyone got a better idea or an angular specific solution for this please share

2

my take would be to limit the number of nesting as it will occupy the angular templating engine a lot during changes (and change detection). Especially when the list becomes long.

I think creating redundancy by copying array content etc is more recommendable (favor memory usage instead of CPU)

3

thanx , do you know a good way to identify between the original array and the one created for the list ?

from my understanding is that i would need to pass a “parentID” and a “selfID” to the objects ? so that i can access the original object … becasue cities might have another array called “streets” (these are just examples , the real app should work with clients and the location of their restaurants , one client can have more than one restaurant)

but converting those arrays also uses cpu , so i think when an array gets big its always gonna be slow , but i dont think it will ever reach more than 300 restaurants overall … later i wanna port everything to firestore but for now json/object will have to do

4

300 is nothing, making a copy of an array or anything. In plain JS using array functions.

Don’t forget to make deep copies of arrays. otherwise you are secretly changing parts of the original.

if you need to reference, you need IDs obviously.

5

My advice on situations like this is “write the template first”. That should make it clear what data format is easiest to “templatize”, and then work backwards from there to massage the data into that format. Don’t start with the data structure you have; start with the data structure you want.

6

ijust found this out yesterday that in ionic/angular all the vars are internally instanced or connected or whatever you call that (which is awesome ) !

its just completely different from js where every new var is a deepcopy by default … had to rewrite the app quite a bit , but code came out much smaller and cleaner

7

Is horrible and very frustrating to debug. Don’t try to rely on these principles to create “efficient” code that runs onces and modifies values in many places.

Not sure if you refer to var as the keyword to define a variable. If you do, then stop using var, but use let.

You will thank me later for these hints after banging your head to all walls in your room

:sweat_smile: :sweat_smile: :sweat_smile: :sweat_smile:

Tom

1 Like
8

i think its alright , but it should be outlined on the first page which you open on ionicframework.com

before this i solely wrote firefox addons in pure javascript (the good old addons which could modify the browser itsself) , also kind of apps if wanna call them that , giving data from one page to the next in the options was always alot of work … here in ionic/angular i can just use a single service with a simple object which holds my data across different pages and forms , i think its very nice , the index of everything always stays the same , no remembering of indexes or anything like that …

1 Like