Each time the user loads a page, ionic should choose 3 given cities from a random cities-array

Ionic Framework
1

still don’t get the if-functionality:
how can i get something like this working in ionic?
-> “each time the user loads a page, ionic should choose 3 given cities from a random cities-array”

ionViewWillEnter() {
this.RandomNumber = Math.floor(Math.random() * 3);
}

cities1 = [“1”, “London”, “Sidney”, “New York”]
cities2 = [“2”, “Munich”, “Hamburg”, “Berlin”]
cities3 = [“3”, “Barcelona”, “Madrid”, “Singapore”]

if (RandomNumber == 0)
{
city1=this.cities1[1];
city2=this.cities1[2];
city3=this.cities1[3];
}

if (RandomNumber == 1)
{
city1=this.cities2[1];
city2=this.cities2[2];
city3=this.cities2[3];
}

if (RandomNumber == 2)
{
city1=this.cities3[1];
city2=this.cities3[2];
city3=this.cities3[3];
}

-> how can i fix this to work? thx! :slight_smile:

2

This is not an Ionic related question, but a general programming one. Basically, your if statements are never called from the ionViewWillEnter function.

export class HomePage {
  currentCities: Array<any>;
  cities1: Array<any> = ['1', 'London', 'Sydney', 'New York'];
  cities2: Array<any> = ['2', 'Munich', 'Hamburg', 'Berlin'];
  cities3: Array<any> = ['3', 'Barcelona', 'Madrid', 'Singapore'];
  RandomNumber: number;

  constructor() {
  }


  ionViewWillEnter() {
    this.RandomNumber = Math.floor(Math.random() * 3);
    if (this.RandomNumber === 0) {
      this.currentCities = this.cities1;
    } else if (this.RandomNumber === 1) {
      this.currentCities = this.cities2;
    } else {
      this.currentCities = this.cities3;
    }

    console.log(this.currentCities[1]);
    console.log(this.currentCities[2]);
    console.log(this.currentCities[3]);
  }
}
3

This is nothing personal against @ChrisGriiffith, who as usual has done a better job of coloring within the lines than I, but I have two fundamental philosophical quibbles with the code in the previous post (and OP, for that matter):

Store stuff in one canonical place

I get queasy when I write code that has overlapping responsibility, because it inevitably raises the question “what happens when they disagree?”, and in my experience that’s just a festering cauldron of bugs waiting to happen. So I don’t like the fact that RandomNumber is an object property alongside currentCities which derives from it. I want one or the other only.

Concise idioms improve readability

The big if/else chain obscures what is happening under the weight of verbosity. There is an opportunity here to make a choice between ease of data representation and brevity/simplicity of code. Especially in interpreted languages like JavaScript, I always choose to restructure data for the convenience of code.

allCities: string[][] = [
  ['London', 'Sydney', 'New York'],
  ['Munich', 'Hamburg', 'Berlin'],
  ['Barcelona', 'Madrid', 'Singapore'],
];
currentCities: string[];

ionViewWillEnter(): void {
  this.currentCities = this.allCities[Math.floor(Math.random() * this.allCities.length)];
}
4

I debated condensing the code like that as well. :wink:

This a great example of starting with code that works (mine), then refactoring it into something more concise (@rapropos). I could see the next step, taking this list of cities and migrating them into a service, and having it do the heavy lifting and not the page component.

Chris