How to make dynamically created divs each go to the same page but with different content (like a filter)

[Alpha-Blue]

Hi all!

I’ve been struggeling with this for the past few hours and couldn’t find any help anywhere. I’m pretty new to Ionic + Angular and would really like your help!

So this is my code:

tab1.page.html

<ion-card *ngFor="let data of routes_results">
      <ion-card-header>
        <ion-card-title>{{ data.Route.code }}</ion-card-title>
        <ion-card-subtitle>{{ data.Route.description }}</ion-card-subtitle>
      </ion-card-header>
      <ion-grid>
        <ion-row>
          <ion-col class="vertical-align">
            <hr>
          </ion-col>
          <ion-col>
            <h3 class="title-values">Lading</h3>
          </ion-col>
          <ion-col class="vertical-align">
            <hr>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col>
            <p class="value-title">Gewicht kg</p>
            <p class="value-col">{{ data.Route.weight }}</p>
          </ion-col>
          <ion-col>
            <p class="value-title">Volume m3</p>
            <p class="value-col">{{ data.Route.volume }}</p>
          </ion-col>
          <ion-col>
            <p class="value-title">Leveringen</p>
            <p class="value-col">{{ data.Route.ride }}</p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-card>

tab1.page.ts

import {Component, OnInit} from '@angular/core';
import * as routes from '../../assets/data/routes.json'

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss', '../app.component.scss']
})
export class Tab1Page implements OnInit {

  current_date = new Date();

  routes_results: any = (routes as any).default;

  constructor() {}

  ngOnInit() {
    console.log(routes)
  }

}

And what I’m trying to do is the following:

So my app needs to be able to show where a driver needs to go. So first they will see what cities they need to go to (in an ionic card). And they need to be able to click on those cards and go to a more detailed page where every street is shown (from that specific city) and it needs to work the exact same way as the city page.

The thing is. I create those cards using my local json file. So how do I make it so it only shows the streets for that specific city on the page where they will go after clicking on one of the cards without having to create a page for every single city?

Thanks in advance! If anything is unclear I’m sorry! Ask me anything.

[mhartington]

You basically filter the json data by some sort of key. Without knowing what the json looks like, when you click on a card for a city, you set that as a route param

{ path: "city/:city", loadChild: () => import(...).then(m=> m.Module) }

And you’d reduce the data from your json based on that key. If you have some code you can share that would help.

[Alpha-Blue]

Hi! Thanks for your help.

My json file for the cities is as follows:

[
	{
		"Route" : {
			"id"            : "1",
			"date"          : "",
			"code"          : "EIN-05",
			"description"   : "Eindhoven",
			"weight"        : "85",
			"volume"        : "9.5",
			"ride"          : "11"
		}
	},
	{
		"Route" : {
			"id"    : "2",
			"date": "",
			"code": "UTR-05",
			"description": "Utrecht",
			"weight": "87",
			"volume": "6.3",
			"ride": "8"
		}
	},

	{
		"Route": {
			"id"    : "1",
			"date": "",
			"code": "DB-01",
			"description": "Den Bosch",
			"weight": "35",
			"volume": "2.5",
			"ride": "2"
		}
	},
	{
		"Route": {
			"id"    : "3",
			"date": "",
			"code": "TIL-03",
			"description": "Tilburg",
			"weight": "65",
			"volume": "4.5",
			"ride": "5"
		}
	},
	{
		"Route" : {
			"id"    : "5",
			"date": "",
			"code": "EIN-05",
			"description": "Eindhoven",
			"weight": "75",
			"volume": "5.5",
			"ride": "7"
		}
	},
	{
		"Route" : {
			"id"    : "2",
			"date": "",
			"code": "UTR-05",
			"description": "Utrecht",
			"weight": "87",
			"volume": "6.3",
			"ride": "8"
		}
	},

	{
		"Route": {
			"id"    : "3",
			"date": "",
			"code": "TIL-03",
			"description": "Tilburg",
			"weight": "77",
			"volume": "7",
			"ride": "8"
		}
	},
	{
		"Route" : {
			"id"    : "5",
			"date": "",
			"code": "EIN-05",
			"description": "Eindhoven",
			"weight": "75",
			"volume": "5.5",
			"ride": "7"
		}
	},
	{
		"Route" : {
			"id"    : "2",
			"date": "",
			"code": "UTR-05",
			"description": "Utrecht",
			"weight": "87",
			"volume": "6.3",
			"ride": "8"
		}
	}
]

Then I have my file for all the streets for one of the cities (this is sample data)

[
	{
		"Route" : {
			"id"            : "1",
			"date"          : "12-08-2019",
			"code"          : "EIN-05",
			"description"   : "Eindhoven",
			"weight"        : "85",
			"volume"        : "9.5",
			"ride"          : "11"
		},
		"Rit" : {
			"id"            : "1",
			"startTime"     : "0900",
			"endTime"       : "1700"
		},
		"Ritr"  : {
			"id"        : "1",
			"seq"       : "1"
		},
		"Picklist" : {
			"id"            : "1",
			"number"        : "564832",
			"address"       : "Hadewychstraat 23",
			"postalCode"    : "5262 TA",
			"city"          : "Vught"
		},
		"Project" : {
			"id"    : "1"
		},
		"Relation" : {
			"id"        : "1",
			"name"      : "Jansen",
			"phone"     : "0614047396"
		},
		"PicklistRow" : {
			"id"        : "1"
		},
		"ProjectLine" : {
			"id"            : "1",
			"quantity"      : "3",
			"grossPrice"    : "15.50",
			"grossAmount"   : "46.50"
		},
		"Product" : {
			"id"            : "1",
			"code"          : "0216031",
			"description"   : "Harting multikabel 16 polig LOOM 25m (6 kabels)",
			"searchText"    : "0216031 Harting multikabel 16 polig LOOM 25m (6 kabels)"
		}
	},
	{
		"Route" : {
			"id"            : "1",
			"date"          : "12-08-2019",
			"code"          : "EIN-05",
			"description"   : "Eindhoven",
			"weight"        : "85",
			"volume"        : "9.5",
			"ride"          : "11"
		},
		"Rit" : {
			"id"            : "1",
			"startTime"     : "0900",
			"endTime"       : "1700"
		},
		"Ritr"  : {
			"id"        : "1",
			"seq"       : "1"
		},
		"Picklist" : {
			"id"            : "1",
			"number"        : "564832",
			"address"       : "Hadewychstraat 23",
			"postalCode"    : "5262 TA",
			"city"          : "Vught"
		},
		"Project" : {
			"id"    : "1"
		},
		"Relation" : {
			"id"        : "1",
			"name"      : "Jansen",
			"phone"     : "0614047396"
		},
		"PicklistRow" : {
			"id"        : "1"
		},
		"ProjectLine" : {
			"id"            : "2",
			"quantity"      : "1",
			"grossPrice"    : "10",
			"grossAmount"   : "10"
		},
		"Product" : {
			"id"            : "2",
			"code"          : "0109006",
			"description"   : "XLR signaalkabel 0.25m",
			"searchText"    : "0109006 XLR signaalkabel 0.25m"
		}
	},
	{
		"Route" : {
			"id"            : "1",
			"date"          : "12-08-2019",
			"code"          : "EIN-05",
			"description"   : "Eindhoven",
			"weight"        : "85",
			"volume"        : "9.5",
			"ride"          : "11"
		},
		"Rit" : {
			"id"            : "1",
			"startTime"     : "0900",
			"endTime"       : "1700"
		},
		"Ritr"  : {
			"id"        : "1",
			"seq"       : "1"
		},
		"Picklist" : {
			"id"            : "1",
			"number"        : "564832",
			"address"       : "Hadewychstraat 23",
			"postalCode"    : "5262 TA",
			"city"          : "Vught"
		},
		"Project" : {
			"id"    : "1"
		},
		"Relation" : {
			"id"        : "1",
			"name"      : "Jansen",
			"phone"     : "0614047396"
		},
		"PicklistRow" : {
			"id"        : "1"
		},
		"ProjectLine" : {
			"id"            : "3",
			"quantity"      : "5",
			"grossPrice"    : "50.55",
			"grossAmount"   : "252.75"
		},
		"Product" : {
			"id"            : "3",
			"code"          : "0104015",
			"description"   : "LKS19 speakermulti 15m",
			"searchText"    : "0104015 LKS19 speakermulti 15m"
		}
	},
	{
		"Route" : {
			"id"            : "1",
			"date"          : "12-08-2019",
			"code"          : "EIN-05",
			"description"   : "Eindhoven",
			"weight"        : "85",
			"volume"        : "9.5",
			"ride"          : "11"
		},
		"Rit" : {
			"id"            : "1",
			"startTime"     : "0900",
			"endTime"       : "1700"
		},
		"Ritr"  : {
			"id"        : "1",
			"seq"       : "1"
		},
		"Picklist" : {
			"id"            : "1",
			"number"        : "564832",
			"address"       : "Hadewychstraat 23",
			"postalCode"    : "5262 TA",
			"city"          : "Vught"
		},
		"Project" : {
			"id"    : "1"
		},
		"Relation" : {
			"id"        : "1",
			"name"      : "Jansen",
			"phone"     : "0614047396"
		},
		"PicklistRow" : {
			"id"        : "1"
		},
		"ProjectLine" : {
			"id"            : "3",
			"quantity"      : "1",
			"grossPrice"    : "35.75",
			"grossAmount"   : "35.75"
		},
		"Product" : {
			"id"            : "3",
			"code"          : "0521001",
			"description"   : "CLF SB-8/801 led controller DVI in / RJ45 linsn uit",
			"searchText"    : "0521001 CLF SB-8/801 led controller DVI in / RJ45 linsn uit"
		}
	},
	{
		"Route" : {
			"id"            : "1",
			"date"          : "12-08-2019",
			"code"          : "EIN-05",
			"description"   : "Eindhoven",
			"weight"        : "85",
			"volume"        : "9.5",
			"ride"          : "11"
		},
		"Rit" : {
			"id"            : "1",
			"startTime"     : "0900",
			"endTime"       : "1700"
		},
		"Ritr"  : {
			"id"        : "1",
			"seq"       : "1"
		},
		"Picklist" : {
			"id"            : "1",
			"number"        : "564832",
			"address"       : "Hadewychstraat 23",
			"postalCode"    : "5262 TA",
			"city"          : "Vught"
		},
		"Project" : {
			"id"    : "1"
		},
		"Relation" : {
			"id"        : "1",
			"name"      : "Jansen",
			"phone"     : "0614047396"
		},
		"PicklistRow" : {
			"id"        : "1"
		},
		"ProjectLine" : {
			"id"            : "3",
			"quantity"      : "5",
			"grossPrice"    : "25.25",
			"grossAmount"   : "75.75"
		},
		"Product" : {
			"id"            : "3",
			"code"          : "0404050",
			"description"   : "Motorsturing 24 kanaals (12x CEE 4p rood + 6x H16 uit) DG",
			"searchText"    : "0404050 Motorsturing 24 kanaals (12x CEE 4p rood + 6x H16 uit) DG"
		}
	}
]

[Alpha-Blue]

Fixed it using your piece of code! Thank you so much!