ionic2- Dynamically change contents of an ion-card

Question

I have a list of books which are fetched to the class through a provider from the backend API. This is the sample data that I’m getting

 {
   "success":true,
   "books":[
      {
         "id":1000,
         "book_code":"CC219102",
         "read_status":"completed",
         "name":"Book A",
         "price":"80"
      },
      {
         "id":1001,
         "book_code":"CC219103",
         "read_status":"reading",
         "name":"Book B",
         "price":"50"
      },
      {
         "id":1002,
         "book_code":"CC219104",
         "read_status":"completed",
         "name":"Book C",
         "price":"120"
      },
      {
         "id":1003,
         "book_code":"CC219105",
         "read_status":"yet_to_read",
         "name":"Book D",
         "price":"75"
      },
      {
         "id":1004,
         "book_code":"CC219106",
         "read_status":"completed",
         "name":"Book E",
         "price":"100"
      }
   ]
}

As you can see, API retuns five books in this case. I’m calling a function loadBooks() inside the controller to fetch this data and it is stored in an array myBooks: any = [];

I iterate this array and display each book using an ionic card.

Things is, data we obtained might change. And there is another function refreshBookData() which fetched the data again and this has been implemented using a socket. So when changes are there, I wanna show the changes in the html page as well

If the price of a book changes, the new price will be available in this function and I want to update the card info for that book

In the web, it can be achieved easily. Don’t know how this can be achieved in ionic. Can anyone provide me with a solution?

HTML CODE

  <ion-card *ngFor="let book of books" id="{{book.book_code}}">
    <ion-grid>
      <ion-row class="{{book.read_status}} row">
        <ion-col>
            <span>{{book.name | uppercase}}</span>          
        </ion-col>
        <ion-col>
          <div>
            <div float-right>{{book.price}}</div>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-card>

And the component class looks like this:

import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import * as io from "socket.io-client";
import { BookServicesProvider } from './../../providers/book-services/book-services';
import { Storage } from '@ionic/storage';


@Component({
  selector: 'page-my-books-page',
  templateUrl: 'my-books-page.html',
})
export class MyJobsPage {
  memberId: any= 1;
  myBooks: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private storage: Storage, private bookService: BookServicesProvider) {
    this.loadBooks(this.memberId);
    this.refreshBookData(this.memberId);
  }

  loadBooks(memberId) {
    let reqParams = {
      memberId: memberId
    };
    this.jobService.myJobs(reqParams)
    .then(data => {
        this.myJobs = data['jobs'];
    });
  }

  refreshBookData(memberId) {
    var params = {
        memberId: memberId.toString()
    };
    var socket = io('localhost:3000/books');
    socket.on('connect', function (obj) {

        //Emitting the params to socket
        socket.emit('bookStatuses', params);

        socket.on('book_statuses', function (data) {
            //received data; storing it in temp variable
            var myBooksTemp = data.books;

            if (myBooksTemp) {
                //iterating through the changed data
                myBooksTemp.forEach((value, key, index) => {


                    //code to change html here


                });
            }
        });
    });
  }
}

Yes, don't know how to update data in a list that has already been iterated. To identify each card alone, I gave a unique id to each card. Hoping, there's some way using which I can update data of a card by using this id. @Sagar Kharche — Smokey, May 04 '18 at 11:05
Do you need to tell the angular to update the content? may be using markForCheck() try calling markForCheck after you assign data. — Sagar Kharche, May 04 '18 at 11:08
I'm not quite familiar with that. Is there any other way to update the html? @Sagar Kharche — Smokey, May 04 '18 at 11:12
https://stackoverflow.com/questions/41364386/whats-the-difference-between-markforcheck-and-detectchanges This could help you. — Sagar Kharche, May 04 '18 at 11:13
Is there a way to update myBooks array content from refreshBookData() function? @Sagar Kharche — Smokey, May 04 '18 at 11:26

Andrews Duarte · Answer 1 · 2019-01-26T02:53:11.730

Posting as an answer because I can't comment. But maybe its because the scope changing, use '=>' instead of 'function'.

socket.on('book_statuses', data => {
            //received data; storing it in temp variable
            var myBooksTemp = data.books;

            if (myBooksTemp) {
               //If I understood right, here is where you get the updated
               //books, so, set in 'myBooks'
               this.myBooks = myBooksTemp;
            }
         });

ionic2- Dynamically change contents of an ion-card

1 Answers1