0

I have a list of rows with specific ids:

<li *ngFor="let app of Apps; let i = index> 
<div id ="{{app[i]}}" class="row">{{app[i]}}</div>

and a list of messages in the form of buttons:

<li *ngFor="let msg of messages; let i = index" id="message-{{ i }}"  >

    <button type="button" id = "btn{{i}}">Message</button>
    <div id="message{{i}}" class="modal">

      
      <div class="modal-content">
        <span id="close{{i}}" class='close'>&times;</span>
        <p>{{msg}}</p>
      </div>

    </div>
  <br> <br>
</li>

I have a another array that contains the name of the apps these messages come from. I want to append the messages (buttons) in the row who's id matches the name of the app like this: enter image description here

I am a beginner to html/css/javascript/angular so any kind of pointers and guidance will be helpful!

shasha
  • 51
  • 1
  • 7
  • You may be best to merge these two arrays so you only have to do the computation once. Something like lodash merge - https://stackoverflow.com/questions/35091975/how-to-use-lodash-to-merge-two-collections-based-on-a-key#:~:text=Lodash%20has%20a%20merge%20method,getting%20rid%20of%20the%20keys). At that point when you are looping over Apps, you have the messages associated with it already – dmoo Feb 16 '21 at 16:46
  • @dmoo which two arrays are you referring to? The Apps and messages arrays? – shasha Feb 16 '21 at 16:57
  • 1
    I do, something like `_.merge(_.keyBy(apps, 'appName'), _.keyBy(messages, 'appName'));` Should give you a hybrid object array `[{ ... the app properties, ... the messages properties }]`. Then in your `*ngFor="let app of Apps;` - as they are now merged you will have - `app.messageProperty` – dmoo Feb 17 '21 at 14:06

1 Answers1

0

You don't want to do this in your template. In your JS:

  1. Make an object type that holds an app and a array of messages.
  2. Iterate through your Apps object and push each element to a new array of the object you made in step one.
  3. Iterate through your messages object and push the message to the array of messages in your new object if it matches the app.
  4. Now in your template you can do an *ngFor on your new object, then add a nested *ngFor on newObject.messages
Alex
  • 848
  • 6
  • 7
  • Does this mean that for each app there will be a new object? – shasha Feb 16 '21 at 17:20
  • 1
    You're basically merging your two objects into a new one that is easier to iterate through in the template. You will end up with a new array of objects that has one object per app and an array of messages per app. – Alex Feb 17 '21 at 11:55