Get Items from a QR-Code

Hello everybody,i have a problem with the transfer of data. So I have a QR scanner that is supposed to scan business cards (which it does). Then when the business cards are scanned, it should output them to me as a kind of item (see picture 1). The QR code for the business cards are output as JSON (see picture 2). Somehow I can’t get him to output them to me as an item, I’ve tried everything possible, but somehow I don’t get it.

Picture 1:
pic1

Picture 2:
pic2

how i tried to get what i want (it looks a bit stupid, but if you don’t have any ideas after a while, you test everything :D. In the beginning I knew what I was doing, but after a while I somehow tried, delete and reassemble all kinds of things.):

 saveQR() {
      this.visitenkarteService.addQR(this.scanResult).then(qrcode => {
      this.qrcode = this.scanResult;
      console.log('saveQR ' + this.qrcode.toString);
      this.qrcodeTitel = this.scanResult.toString.title;
      console.log('qrcodeTOstring ' + this.qrcode.toString);
      console.log('qrcodeTOstringTITLE ' + this.qrcodeTitel);
     // console.log('StrinGtest: ' + JSON.stringify(this.scanResult));
     // this.qrcodeName = this.scanResult.name;
     // this.qrcodeTelefon = this.scanResult.telefon;
     // this.showToast('QR-Code Hinzugefügt!');
    //  this.timecreate = Date.now();
      this.loadQR();
      console.log(this.timecreate);
//      const dateFormat = Date.now()[0];
//      console.log(dateFormat);
  }); }

here i tried to show me with a button:

  loadQR() {
  this.visitenkarteService.getQR().then(qrcode => {
    this.qrcode = this.scanResult;
    let result: any;
    result = {
      title: qrcode.title,
      name: qrcode.name,
      telefon: qrcode.telefon
      };
//    this.qrcode = JSON.stringify(result);
    console.log('biggi' + JSON.stringify(result));
//    this.qrcodeTitel = JSON.stringify(this.scanResult.title);
//    console.log('HIER IST der titel: ' + JSON.stringify(this.scanResult.title));
 //   console.log('HIER IST TITEL222: ' + this.qrcodeTitel);
  //  this.qrcodeTelefon = JSON.stringify(this.scanResult.telefon);
  }); }

my html:

  <ion-list >
  <ion-button expand="full" (click)="loadQR()" color="primary">
      <ion-icon slot="start" name="easel-outline"></ion-icon>
      Update contactlist    
    </ion-button>
    <ion-list-header>
      <ion-label>My Contact</ion-label>
    </ion-list-header>

<!--    <ion-item-sliding *ngFor="let item of items"> -->
      <ion-item *ngFor="let item of qrcode" color="light">
        <ion-label text-wrap>
          <h3>Titel: {{ item.title }}</h3>
          <p>Name:  {{ item.name }}</p>
          <ion-text color="secondary">
          <p>Telefon: {{ item.telfon }}</p>
          </ion-text>
        </ion-label>
      </ion-item>

<!--      <ion-item-options side="end">
        <ion-item-option color="danger" (click)="deleteItem(item)">Delete</ion-item-option>
      </ion-item-options> -->
  </ion-list>

I would be happy about any hints, tips or whatever. Thanks for your effort, even if you only had a look :slight_smile:

The thing that really leaps out at me here is that ngFor. Have you seen this?

Yes, there was a problem to the ngFor, i tried ngIf now it does 70 % what i want. But the problem here is that when I scan an ITEM it shows me what I wanted, but if I scan another ITEM it overwrites it. I want him to create (add) another item and not overwrite the existing one.

Then the backing property in your controller needs to be an actual array, to which you add things, not a single object that you overwrite.

1 Like

when i change it to an array and use instead ngIf ngFor then in my .html says:

“Identifier ‘title’ is not defined. ‘string’ does not contain such a member ng”

You made another topic involving Storage. Please take Storage totally out of the equation here, at least for now, if possible. If that isn’t possible, then read this post and rearchitect your code to follow it.

Specifically, only one read from Storage, at service construction / app launch. Do NOT read from Storage at any other time during ordinary app execution.

OK, now that that’s done, let’s assume you have a service that looks like this:

interface Thingy { ... }
class ThingyService {
  private thingies$ = new BehaviorSubject<Thingy[]>([]);
  watchThingies(): Observable<Thingy[]> { return this.thingies$; }
  peekThingies(): Thingy[] { return this.thingies$.value; }
  pokeThingies(thingies: Thingy[]): void { this.thingies$.next(thingies); }
  clearThingies(): void { this.pokeThingies([]); }
  addThingy(thingy: Thingy): void { 
    let nt = [...this.peekThingies()]; 
    nt.push(thingy); 
    this.pokeThingies(nt); 
  }
}

In your page, inject this service, call watchThingies at page construction, use @ngneat/until-destroy to manage the subscription to it, assign every new emission to a Thingy[] property in the page, and use ngFor to step through that property in the template. To add new codes, scan the QR and call addThingy with the result.