Populating a View from a data array of objects Angular

Question

I have a data store in a variable requestData which I want to use in populating the notification component view

requestData = {
    "bookId": "5e5bb8ac59441513cca2e64c",
    "bookTitle": "Take Great Photographs",
    "request": [
        {
            "_id": "5e21d286b3ee501ebc39d899",
            "firstname": "Ibaji",
            "lastname": "Offor"
        },
        {
            "_id": "5e2c5a20aff8434278639ff5",
            "firstname": "Cheksmate",
            "lastname": "Fidelis"
        }
    ]
}

the view is supposed to look like the image below after the view has been populated with the above data

this is the code for the notification.component.html

<section class="main profile " my-books>
    <div class="profile-header">
      <h1>Notifications</h1>
    </div>

    <div class="book-list-header">
      <h2>Showing Recent Notifications</h2>
      <!-- <span>(Confirm by click the recieved button once book is returned)</span> -->
    </div>

    <div history *ngFor="let item of requestData">
      <a [routerLink]="['details']">
        <h3>9:15 AM | Mon, Feb 11, 2019</h3>
        <div class="first">
          <span>
            <span class="image-cropper" style=" width: 36px; height: 36px;">
              <img src="assets/images/avatar.jpg" alt="profile image" avatar>
            </span>
            <h4>{{item.request.firstname}} {{item.request.lastname}}</h4>
          </span>

          <span>
            <h3>Book Title</h3>
            <h4>{{item.bookTitle}}</h4>
          </span>
        </div>
      </a>
    </div>

</section>

Any attempt to help will be really appreciated

What is your current result with your try?? Explain what you have tried and what issue you are facing right now.. — Maniraj Murugan
– Maniraj Murugan, Commented Mar 5, 2020 at 2:17
The above code is what I have tried, the issue is trying to make the view into two because of the request array in the requestData above — Ojay
– Ojay, Commented Mar 5, 2020 at 2:21
I have posted the answer below, feel free to accept if it solves your issue.. — Maniraj Murugan
– Maniraj Murugan, Commented Mar 6, 2020 at 0:46

Maniraj Murugan · Accepted Answer · 2020-03-05 02:47:15Z

From the above mentioned requestData, the data is an object, and you are trying to use *ngFor="let item of requestData" on object which is invalid and it should throw the error.

Reason is array's are only the iterables in *ngFor.. So change your above code with the following,

<div history *ngFor="let item of requestData.request">
  <a [routerLink]="['details']">
    <h3>9:15 AM | Mon, Feb 11, 2019</h3>
    <div class="first">
      <span>
        <span class="image-cropper" style=" width: 36px; height: 36px;">
          <img src="https://www.w3schools.com/howto/img_avatar.png" style="width:50px; border: 2px solid #fff; border-radius:50%" alt="profile image" avatar>
        </span>
        <h4>{{item.firstname}} {{item.lastname}}</h4>
      </span>

      <span>
        <h3>Book Title</h3>
        <h4>{{requestData.bookTitle}}</h4>
      </span>
    </div>
  </a>
</div>

Here requestData.request is an array so you need to iterate only this array using *ngFor and replace, {{item.request.firstname}} with {{item.firstname}} and so on for all related data.

To assign the value of bookTitle, you need to use like this directly from the object,

{{requestData.bookTitle}}

Working stackblitz example here..

Collectives™ on Stack Overflow

Populating a View from a data array of objects Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related