Set value in HTML of Array

constructor(public navCtrl: NavController, public api: ApiProvider, public navParams: NavParams, private modal: ModalController) {
this.api.get(‘table/truck’, { params: { limit: 30 } }).subscribe(val => {
this.trucks = val[‘data’];
this.truck1 = val[‘data’];
});
}

onTruckPosition(truck) {
document.getElementById(‘overlaytruck’).style.height = “100%”;

let latlng = new google.maps.LatLng(truck.latitude, truck.longitude);
let map = new google.maps.Map(document.getElementById("map"), {
  zoom: 10,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
let marker = new google.maps.Marker({
  position: latlng,
  map: map,
  icon: 'http://101.255.60.202/webapi/img/truck/50/50',
  title: truck.truck_no
});

Above my code, I want to show result of array but filter by truck_no in HTML, what shoul i do?

@slametbom2 Do you mean that you want to:

  1. sort by truck_no
  2. filter only the trucks with my_truck_no (some truck number you already have)

If it’s 1, then you could do something like:

this.api.get('table/truck', { params: { limit: 30 } }).subscribe(val => {
	let trucks: Array<Truck> = val['data'];
	trucks = (trucks || []).sort((t1, t2) => t1.truck_no - t2.truck_no);
	// or, depending if you want ascending or descending order:
	// trucks = (trucks || []).sort((t1, t2) => t2.truck_no - t1.truck_no);
	this.trucks = trucks;
});

I’m assuming truck_no is a number, if it is a string, use t1.truck_no.localeCompare(t2.truck_no), or t2.truck_no.localeCompare(t1.truck_no), depending on the order.

In case 2, you can just filter the truck with some truck_no that you want (I don’t think this is what you want, I think it’s case 1):

this.api.get('table/truck', { params: { limit: 30 } }).subscribe(val => {
	let trucks: Array<Truck> = val['data'];
	trucks = (trucks || []).filter(t => t.truck_no === my_truck_no);
	this.trucks = trucks;
});