Show particular menuItems under the particular category in the local JSON file

I am trying to call specific JSON data from localy. Basically, I want a user to click on one of the category and get related menuItem to be displayed. I am able to get the category but I can’t get the meniItem to show.in Category and menuItem I have same field called ‘category’ amd it should match

Here’s my code: in home.html i have this

<ion-item text-wrap *ngFor=“let item of newsData” (click)=“open(menuItem, item)”>

{{item.title}}

{{item.desc}}

my data.json

{
“categories” : [
{
“category” :“101flashlight”,
“desc” : “Crackers with multiple sounds”,
“thumb” : “infw/thumb/flash.svg”,
“title” : “Flash Light Crackers”
},
{
“category”:“102zamin”,
“desc” : “Crackers with sparks”,
“thumb” : “infw/thumb/zamin.svg”,
“title” : “Zamin Chakkars”
}
],
“menuItems” : [
{
“name” : “1001party”,
“body” : “infw/detail/confetti/party”,
“category” : “102zamin”,
“code” : “”,
“content” : “2 Pieces per box”,
“desc” : “Crackers with multiple sounds”,
“packing” : “30 Boxes per case”,
“size” : “16x22x8cm”,
“tags” : “Confetti”,
“thumb” : “infw/thumb/partycannon.png”,
“title” : “Party Cannon”,
“video” :“infw/videos/coming_soon.webm”
},
{
“name” :“1002dollar”,
“body” : “infw/detail/confetti/dollar”,
“category” : “102zamin”,
“code” : “”,
“content” : “2 Pieces per box”,
“desc” : “Crackers with multiple sounds”,
“packing” : “30 Boxes per case”,
“size” : “52x12x5cm”,
“tags” : “Confetti”,
“thumb” : “infw/thumb/dollar.png”,
“title” : “Dollar”,
“video” : “infw/videos/coming_soon.webm”
},
{
“name” :“1014elephantspl”,
“body” : “infw/detail/flash/4splelephant”,
“category” : “101flashlight”,
“code” : “”,
“content” : “5 Pieces per packet”,
“desc” : “Crackers with multiple sounds”,
“packing” : “500 Packets per case”,
“size” : “16x22x8cm”,
“tags” : “Flash Light Crackers”,
“thumb” : “infw/thumb/4splelephant.png”,
“title” : “4’ Elephant Special Crackers”,
“video” : “infw/videos/coming_soon.webm”
},
{
“name” :“1024deluxelak”,
“body” : “infw/detail/flash/4deluxelak”,
“category” : “101flashlight”,
“code” : “”,
“content” : “5 Pieces per packet”,
“desc” : “Crackers with multiple sounds”,
“packing” : “300 Packets per case”,
“size” : “16x22x8cm”,
“tags” : “Flash Light Crackers”,
“thumb” : “infw/thumb/4deluxelak.png”,
“title” : “4’ Deluxe Lakshmi Crackers”,
“video” : “infw/videos/coming_soon.webm”
},
{
“name” :“1034deluxeele”,
“body” : “infw/detail/flash/4deluxeele”,
“category” : “101flashlight”,
“code” : “”,
“content” : “5 Pieces per packet”,
“desc” : “Crackers with multiple sounds”,
“packing” : “300 Packets per case”,
“size” : “16x22x8cm”,
“tags” : “Flash Light Crackers”,
“thumb” : “infw/thumb/4deluxeele.png”,
“title” : “4’ Deluxe Elephant Crackers”,
“video” : “videos/coming_soon.webm”
}
]

output image

Screenshot-2018-1-25 Ionick - Ionic Lab

All i want is to show two categories,whenever i click one of them it should show the menuitems by matching the category column in both category and menuItem.

I might have done it in a different way but that should help you get it done with:

  1. I create two pages: parent and child page
    2.The parent page has these
categories: any; //a variable that holds the categories you have on the JSON data

In the constructor, I have this
this.categories =  [
        {
          "category" : "101flashlight",
          "desc" : "Crackers with multiple sounds",
          "thumb" : "infw/thumb/flash.svg",
          "title" : "Flash Light Crackers"
        },
        {
          "category": "102zamin",
          "desc" : "Crackers with sparks",
          "thumb" : "infw/thumb/zamin.svg",
          "title" : "Zamin Chakkars"
        }
      ]
I then create a open() method like this

open(item){
  this.navCtrl.push(BeaconPage, {
    item: item
  })
}

which helps me pass data to the child page i.e the category through this from the html of the parent page

 <ion-item *ngFor="let items of categories">
  <button ion-button clear item-end (click)="open(items.category)"> {{items.title }}</button>
</ion-item>
  1. one the child page, I have this
import { NavParams } from 'ionic-angular';

menuItems: any; //a variable that holds the menuitems
getParam: any; //a variable that will hold the data(category from the parent page)

On the constructor, I have this

 this.getParam = this.navParam.get('item'); //this actually gets the data from the parent page

And here is the JSON data from the menuitems on the constructor still 
 this.menuItems = [ 
        {
          "name": "1001party",
          "body": "infw/detail/confetti / party",
          "category": "102zamin",
          "code": "",
          "content": "2 Pieces per box",
          "desc": "Crackers with multiple sounds",
          "packing": "30 Boxes per case",
          "size": "16x22x8cm",
          "tags": "Confetti",
          "thumb": "infw/thumb/partycannon.png",
          "title": "Party Cannon",
          "video": "infw/videos/coming_soon.webm"
        },
        {
          "name": "1002dollar",
          "body": "infw/detail/confetti / dollar",
          "category": "102zamin",
          "code": "",
          "content": "2 Pieces per box",
          "desc": "Crackers with multiple sounds",
          "packing": "30 Boxes per case",
          "size": "52x12x5cm",
          "tags": "Confetti",
          "thumb": "infw/thumb/dollar.png",
          "title": "Dollar",
          "video": "infw/videos/coming_soon.webm"
        },
        {
          "name": "1014elephantspl",
          "body": "infw/detail/flash / 4splelephant",
          "category": "101flashlight",
          "code": "",
          "content": "5 Pieces per packet",
          "desc": "Crackers with multiple sounds",
          "packing": "500 Packets per case",
          "size": "16x22x8cm",
          "tags": "Flash Light Crackers",
          "thumb": "infw/thumb/4splelephant.png",
          "title": "4’ Elephant Special Crackers",
          "video": "infw/videos/coming_soon.webm"
        },
        {
          "name": "1024deluxelak",
          "body": "infw/detail/flash / 4deluxelak",
          "category": "101flashlight",
          "code": "",
          "content": "5 Pieces per packet",
          "desc": "Crackers with multiple sounds",
          "packing": "300 Packets per case",
          "size": "16x22x8cm",
          "tags": "Flash Light Crackers",
          "thumb": "infw/thumb/4deluxelak.png",
          "title": "4’ Deluxe Lakshmi Crackers",
          "video": "infw/videos/coming_soon.webm"
        },
        {
          "name": "1034deluxeele",
          "body": "infw/detail/flash / 4deluxeele",
          "category": "101flashlight",
          "code": "",
          "content": "5 Pieces per packet",
          "desc": "Crackers with multiple sounds",
          "packing": "300 Packets per case",
          "size": "16x22x8cm",
          "tags": "Flash Light Crackers",
          "thumb": "infw/thumb/4deluxeele.png",
          "title": "4’ Deluxe Elephant Crackers",
          "video": "videos/coming_soon.webm"
        }
      ] 

On the child's page .html, I have this
 <ion-list>
      <ng-container *ngFor="let menu of menuItems">
        <ion-item *ngIf="menu.category == getParam">
          {{menu.name}}
        </ion-item>
     </ng-container>
</ion-list>

Thats all I did and hope this helps. Cheers

Thanks for ur reply.I call Json data locally ,from the /assets/data.json. folder.how to do that, my Home.ts and details.ts and my provider are as follows…

details.ts


import { Component } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import { NavController, NavParams } from ‘ionic-angular’;
import {HttpProvider} from ‘…/…/providers/http-provider’;

@Component({
selector: ‘page-details-basic’,
templateUrl: ‘details-basic.html’
})
export class DetailsBasic {
item;
state: string = “menuItems”;
constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http,private httpProvider:HttpProvider) {
this.item = this.navParams.get(‘item’);
this.http.get(“assets/data.json”).subscribe (data => {

    this.item = data.json();
    console.log(this.item)
    }, error => {
    console.log(error);
    })
  }

}



home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {HttpProvider} from '../../providers/http-provider';
import {DetailsBasic} from '../detail/detail'
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers:[HttpProvider]
})
export class HomePage {
  newsData: any;
  loading: any;

  constructor(public navCtrl: NavController, private httpProvider:HttpProvider, ) {
  
this.getdata();
  }
    getdata(){
     
      this.httpProvider.getJsonData().subscribe(
        result => {
          this.newsData=result.categories;
          this.newsData=result.menuItems;
          console.log("Success : "+this.newsData);
        },
        err =>{
          console.error("Error : "+err);
        } ,
        () => {
          console.log('getData completed');
        }
      );
    }
    itemClicked(item) {
      this.navCtrl.push(DetailsBasic, {
        item: item
      });
    }
  }

provider.ts

@Injectable()
export class HttpProvider {

  constructor(public http: Http) {
    console.log('Hello HttpProvider Provider');
  }
  getJsonData(){
    return this.http.get('assets/data.json').map(res => res.json());
  }
}

You can try like this

home.html
<ion-item text-wrap *ngFor=“let item of newsData” (click)=“open($event, item)”>
home.ts

public open(event ,item){
this.navCtrl.push(DetailsPage,{
item:item,
});
}

details.html

<ion-item *ngIf="details">
{{details.category}}
{{details.desc}}
{{details.thumb}}
{{details.title}}
</ion-item>

details.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DetailsPage } from '../details/details';


@IonicPage()
@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
})
export class DetailsPage {
details:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  this.details = navParams.get('item');

  }
  
}

I hope you problem will be fixed
Good Luck
Thanks

I got that.but i am having problem while parsing and fetching my json file.i got categories from json file.while i click one of the categories i didnt get any menuitems related to that categories.thanks

Please share your code here.

detail.html

<ion-list>

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

detail.ts

export class DetailsBasic {
 item:any[];
 
   constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http,private httpProvider:HttpProvider) {
    this.item = this.navParams.get('item');
    this.http.get("assets/data.json").subscribe (data => {
      
        this.item = data.json();
        this.item = Array.of(this.item);
        console.log(this.item)
        }, error => {
        console.log(error);
        })
      }
     
}

home.ts

export class HomePage {
  newsData: any;
 

  constructor(public navCtrl: NavController, private httpProvider:HttpProvider, ) {
  
this.getdata();
  }
    getdata(){
     
      this.httpProvider.getJsonData().subscribe(
        result => {
          this.newsData=result.categories;
          
          console.log("Success : "+this.newsData);
        },
        err =>{
          console.error("Error : "+err);
        } ,
        () => {
          console.log('getData completed');
        }
      );
    }
    itemClicked(item) {
      this.navCtrl.push(DetailsBasic, {
        item: item
      });
    }
  }

home.html

<ion-item text-wrap *ngFor="let item of newsData" (click)="itemClicked(item)">
  <p >{{item.title}}</p>
  <ion-thumbnail item-left>
    <img data-src="{{item.thumb}}">
  </ion-thumbnail>
  <p >{{item.desc}}</p>
  </ion-item>

my ouput image

Screenshot-2018-1-25 Ionick - Ionic Lab

i got categories page,when i click it,i didnt get menuitems,my data.json is already in the question

error messege i received is…
Screenshot-2018-1-27 Ionick - Ionic Lab

can you explain why you are use the item array two times?

when i google , i found one solution i tried that,that too didnt work, the actual code is,

export class DetailsBasic {
 item:any;
 
   constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http,private httpProvider:HttpProvider) {
    this.item = this.navParams.get('item');
    this.http.get("assets/data.json").subscribe (data => {
      
        this.item = data.json();
       
        console.log(this.item)
        }, error => {
        console.log(error);
        })
      }
     
}

data.json already fetch the value into the home .ts
no need to use second time
what you want to print into the details page?

ok,
menuItems alone,the menuItems should appear under related categories by matching the field

cataegory

You can try like this.
Details.ts


export class DetailsBasic {
 item:any;
 
   constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.item = this.navParams.get('item');
}

details,html

<ion-item *ngIf="item">
        <p >{{item.title}}</p>
       
</ion-item>

I hope your problem will be fixed
Good Luck
Thanks

it removes all the error…thanks a lot, but i still got categories in both the page,to get menuitems what should i do

Why are you shows category at the Details page?

i want to show menuitems in the details page,In home page i got categories…wheneve i click categories, i want to show menuitems related to that categories in the deatils page,how can i achieve that,my data.json file got both categories and menuItems

in myhome.ts i call only categories,how can i cal both categories and menuitems,and show categories in home page and menuitems in details page…

my home.ts

export class HomePage {
  newsData: any;
 

  constructor(public navCtrl: NavController, private httpProvider:HttpProvider, ) {
  
this.getdata();
  }
    getdata(){
     
      this.httpProvider.getJsonData().subscribe(
        result => {
          this.newsData=result.categories;
         
          console.log("Success : "+this.newsData);
        },
        err =>{
          console.error("Error : "+err);
        } ,
        () => {
          console.log('getData completed');
        }
      );
    }
    itemClicked(item) {
      this.navCtrl.push(DetailsBasic, {
        item: item
      });
    }
  }

Share your joson data

{

“categories” : [

{

“id” :“101flashlight”,

“desc” : “Crackers with multiple sounds”,

“thumb” : “infw/thumb/flash.svg”,

“title” : “Flash Light Crackers”

},

{

“id”:“102zamin”,

“desc” : “Crackers with sparks”,

“thumb” : “infw/thumb/zamin.svg”,

“title” : “Zamin Chakkars”

}

],

“menuItems” : [

{

“name” : “1001party”,

“body” : “infw/detail/confetti/party”,

“id” : “102zamin”,

“code” : “”,

“content” : “2 Pieces per box”,

“desc” : “Crackers with multiple sounds”,

“packing” : “30 Boxes per case”,

“size” : “16x22x8cm”,

“tags” : “Confetti”,

“thumb” : “infw/thumb/partycannon.png”,

“title” : “Party Cannon”,

“video” :“infw/videos/coming_soon.webm”

},

{

“name” :“1002dollar”,

“body” : “infw/detail/confetti/dollar”,

“id” : “102zamin”,

“code” : “”,

“content” : “2 Pieces per box”,

“desc” : “Crackers with multiple sounds”,

“packing” : “30 Boxes per case”,

“size” : “52x12x5cm”,

“tags” : “Confetti”,

“thumb” : “infw/thumb/dollar.png”,

“title” : “Dollar”,

“video” : “infw/videos/coming_soon.webm”

},

{

“name” :“1014elephantspl”,

“body” : “infw/detail/flash/4splelephant”,

“id” : “101flashlight”,

“code” : “”,

“content” : “5 Pieces per packet”,

“desc” : “Crackers with multiple sounds”,

“packing” : “500 Packets per case”,

“size” : “16x22x8cm”,

“tags” : “Flash Light Crackers”,

“thumb” : “infw/thumb/4splelephant.png”,

“title” : “4’ Elephant Special Crackers”,

“video” : “infw/videos/coming_soon.webm”

},

{

“name” :“1024deluxelak”,

“body” : “infw/detail/flash/4deluxelak”,

“id” : “101flashlight”,

“code” : “”,

“content” : “5 Pieces per packet”,

“desc” : “Crackers with multiple sounds”,

“packing” : “300 Packets per case”,

“size” : “16x22x8cm”,

“tags” : “Flash Light Crackers”,

“thumb” : “infw/thumb/4deluxelak.png”,

“title” : “4’ Deluxe Lakshmi Crackers”,

“video” : “infw/videos/coming_soon.webm”

},

{

“name” :“1034deluxeele”,

“body” : “infw/detail/flash/4deluxeele”,

“id” : “101flashlight”,

“code” : “”,

“content” : “5 Pieces per packet”,

“desc” : “Crackers with multiple sounds”,

“packing” : “300 Packets per case”,

“size” : “16x22x8cm”,

“tags” : “Flash Light Crackers”,

“thumb” : “infw/thumb/4deluxeele.png”,

“title” : “4’ Deluxe Elephant  Crackers”,

“video” : “videos/coming_soon.webm”

}

]
}

where is your menu item value?

i want to match categories and menuItems by the field id .

there are you using two different json value or single ?