How to match strings in different arrays using Javascript

Question

I'm creating a script in Google Optimize for a travel website. The idea is to return random strings from an array in order to display a tip in the search bar, e.g. "Try searching for [location]". However, there are two search bars; if you click on the first one it unfolds and a second one appears.

Right now, the same line is displayed in both search bars.

Rather than one array that contains both the destinations and hotel names I would like to create two arrays, one with the destinations and one with the hotel names. Is there a way to link each string to another one from a different array, for example by giving them values.

Try searching for Spain and then in the second search bar try [Spanish hotel].

Check the screenshot below

$(".vak-field__cover:first").on("click", function(){

    var texts = ["Egypt", "Spain", "Creta", "France", "Fuerteventura", "Bali", "Sicily", 
                "Turkish Riviera", "Mallorca", "Gran Canaria", "Mirador Maspalomas", 
                "Vila Sal Azul", "Millor paradiso playa", "Cinc plats *3", 
                "Portobello village", "Main star park 5*", "Sam's treasure trove"] ;

    var randomNumber = Math.floor(Math.random() * 17);
    console.log(randomNumber);

    $( ".vak-quicksearch__placeholder:first" ).html( "You could search for \"" + texts[randomNumber]  + "\"" );
    $( ".vak-field>input" ).attr( "placeholder", "Try \"" + texts[randomNumber] + "\"" );

});

Mitya · Accepted Answer · 2019-12-16 10:55:19Z

1

It makes little sense having two, very disparate forms of data (countries and hotels) in one array.

Instead you need a data model that relates these two things.

Something like:

//prep nested, relational data
let data = [
    {
        name: 'Egypt',
        hotels: [
            'Egypt hotel 1',
            'Egypt hotel 2'
        ]
    },
    {
        name: 'Spain',
        hotels: [
            'Spain hotel 1',
            'Spain hotel 2'
            /* etc */
        ]
    },
];

//establish random location and hotel of that location
let rand_location = data[Math.floor(Math.random() * data.length)];
let rand_hotel = rand_location.hotels[Math.floor(Math.random() * rand_location.hotels.length)];

//output
$( ".vak-quicksearch__placeholder:first" ).html( "You could search for \"" + rand_location.name  + "\"" );
$( ".vak-field>input" ).attr( "placeholder", "Try \"" + rand_hotel + "\"" );

Also note I made dyanmic your random generator; you hard-coded it to 17 (the number of items in your array); better is to have it read from the genuine length of the array, so your code doesn't break when you add to or remove items from your data.

answered Dec 16, 2019 at 10:55

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James S Over a year ago

This is what I was looking for. Thanks for your help!

Collectives™ on Stack Overflow

How to match strings in different arrays using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related