Help me fix this for interpolation and search function

Ionic Framework ionic-v3
1

I can’t find a better way to ask this question and I believe it’s quite a simple one, but somehow I just can’t figure out what to do.

  1. I have lists of listed data in arrays
  2. I want to have all of them listed in my html(if possible segmented with a header/divider)
  3. I want the search function to work appropiatly

Someone should please look into my codes and tell where am wrong and how to fix this.

here is my data.JSON

{  
   "list1":[  
      {  
         "id":"0",
         "title":"List 1 of 1",
         "content":"I am the 1st of list1"
      },
      {  
         "id":"1",
         "title":"List 2 of 1",
         "content":"I am the 2nd of list1"
      },
      {  
         "id":"2",
         "title":"List 3 of 1",
         "content":"I am the 3rd of list1"
      }
   ],
   "list2":[  
      {  
         "id":"0",
         "title":"List 1 of 2",
         "content":"I am the 1st of list2"
      },
      {  
         "id":"1",
         "title":"List 2 of 2",
         "content":"I am the 2nd of list2"
      },
      {  
         "id":"2",
         "title":"List 3 of 2",
         "content":"I am the 3rd of list2"
      }
   ],
   "list3":[  
      {  
         "id":"0",
         "title":"List 1 of 3",
         "content":"I am the 1st of list3"
      },
      {  
         "id":"1",
         "title":"List 2 of 3",
         "content":"I am the 2nd of list3"
      },
      {  
         "id":"2",
         "title":"List 3 of 3",
         "content":"I am the 3rd of list3"
      }
   ]
}

In my provider.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import "rxjs/add/operator/map";
import "rxjs/add/operator/do";

@Injectable()
export class TtProvider {

  private url: string = "assets/data/data.json";

  constructor(public http: HttpClient) {

    console.log('Hello TtProvider Provider');
  }


  getData(){
    return this.http.get(this.url)
    .map(res => res )

  }

}

interface Lists{
  id: number,
  title:string,
  content:string,
 }

In my listing.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { TtProvider } from "../../providers/tt/tt";
import { DetailPage } from '../detail/detail';

@IonicPage()
@Component({
  selector: 'page-listings',
  templateUrl: 'listings.html',
})
export class ListingsPage {

  lists:Lists[];
  listSearch: any[];

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public dataapi: TtProvider) {

      this.dataapi.getData().subscribe(data =>{
        console.log ("data has loaded here", data);
        this.lists = data[''];
        this.listSearch = data[''];
      });
  }


  initializeItems() {
    this.lists = [...this.listSearch];
  }

  getItems(ev) {
   this.initializeItems();
   var val = ev.target.value;
      if (val && val.trim() != '') {
        this.lists = this.lists.filter((list) => {
            return (list.title.toString().toLowerCase().indexOf(val.toLowerCase()) > -1);
        })
    }
  }


  viewlist(list){
    console.log('I have loaded item', list);
    this.navCtrl.push(DetailPage, {list:list})
  }

}

interface Lists{
  id: number,
  title:string,
  content:string,
 }

My listing.html is as follows

<ion-header>

  <ion-navbar>
    <ion-title>listings</ion-title>
  </ion-navbar>

  <ion-searchbar 
  (ionInput)="getItems($event)">     
  </ion-searchbar>

</ion-header>


<ion-content padding>

  <ion-list >
    <ion-item *ngFor="let list of lists" >
      {{list.title}}
    </ion-item>
  </ion-list>

</ion-content>

After running that, I have the following

screenprint
screenprint.jpeg1339×659 172 KB

2

This JSON does not seem like a list of list. And a searchbox will perform better if you flatten it into an array of items like:

{  
         "list":"list3"
         "id":"1",
         "title":"List 2 of 3",
         "content":"I am the 2nd of list3"
      }, etc

Secondly, I don’t get this.lists = data['']; How does that make a good assignment of the list? What does console.log(this.lists) show?

I would say the initialise is the same as a search in case you want to display all and then the display list is the result of the filter function on the loaded list

Pseudo code:
displayList = fullList.filter(item=>{return myEvaluation})

So a bit different from the code you took from https://ionicframework.com/docs/components/#searchbar

And you could do a bit more console.logging to see if the intermediate steps really deliver the results you expect.

My thoughts only, though…

1 Like
3

the console.log (this.lists) Shows an array of lists as seen in the screenshot attached.
So if I am right, all I need to do is work on the JSON?