Match URL parameter with property in object array

Question

Using JavaScript and HTML, I created a page with links that take you to another page that are populated by object properties when the URL parameter matches a specified property.

This is the JS to get the parameter:

var urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('title')); // Logs movie title like Black Panther

And the object array:

var movies = [{
    "title" : "Black Panther",
    "theatricalrelease" : "2/16/2018",
    "description" : "Marvel Studios’ “Black Panther” follows T’Challa who, after the death of his father, the King of Wakanda, returns home to the isolated, technologically advanced African nation to succeed to the throne and take his rightful place as king.",
    "image" : "https://i.ytimg.com/vi/2e52vw7RR-A/maxresdefault.jpg"
  },
  {
    "title" : "Avengers: Infinity War",
    "theatricalrelease" : "4/27/2018",
    "description" : "As the Avengers and their allies have continued to protect the world from threats too large for any one hero to handle, a new danger has emerged from the cosmic shadows: Thanos.",
    "image" : "http://sm.ign.com/ign_latam/screenshot/default/avengers-infinitywar-art-860x450-860x450-c_efps.png"
  },
  {
    "title" : "Ant-Man and The Wasp",
    "theatricalrelease" : "7/6/2018",
    "description" : "From the Marvel Cinematic Universe comes a new chapter featuring heroes with the astonishing ability to shrink: “Ant-Man and The Wasp.”",
    "image" : ""
}];

How can I find the correct object to populate the page using the URL parameter?

[`array.find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find). But honestly, you might investigate using a hash table instead of an array, as the performance could suffer as the array gets larger. — Alexander Nied, Mar 28 '18 at 17:59

score 0 · Answer 1 · answered Mar 28 '18 at 18:05

first thing i recommand you to create another property "slug" to prevent any issue linked to URL restriction. (more information here : Which characters make a URL invalid?)

then, as recommanded by @Alexander you can do something like this :

var urlParams = new URLSearchParams(window.location.search);
var slug = urlParams.get('slug');

var movies = [{
        "title" : "Black Panther",
        "slug" : "black-panther",
        "theatricalrelease" : "2/16/2018",
        "description" : "Marvel Studios’ “Black Panther” follows T’Challa who, after the death of his father, the King of Wakanda, returns home to the isolated, technologically advanced African nation to succeed to the throne and take his rightful place as king.",
        "image" : "https://i.ytimg.com/vi/2e52vw7RR-A/maxresdefault.jpg"
    },
    {
        "title" : "Avengers: Infinity War",
        "slug" : "avengers-infinity-war",
        "theatricalrelease" : "4/27/2018",
        "description" : "As the Avengers and their allies have continued to protect the world from threats too large for any one hero to handle, a new danger has emerged from the cosmic shadows: Thanos.",
        "image" : "http://sm.ign.com/ign_latam/screenshot/default/avengers-infinitywar-art-860x450-860x450-c_efps.png"
    },
    {
        "title" : "Ant-Man and The Wasp",
        "slug" : "ant-man-and-the-wasp",
        "theatricalrelease" : "7/6/2018",
        "description" : "From the Marvel Cinematic Universe comes a new chapter featuring heroes with the astonishing ability to shrink: “Ant-Man and The Wasp.”",
        "image" : ""
}];

var currentMovie = movies.find(function(movie) {
    return movie.slug === slug;
});

if(typeof currentMovie === undefined || currentMovie === null) {
    //Manage your 404
}
else {
    //rest of your application
}

Match URL parameter with property in object array

1 Answers1