Question

使用JavaScript和HTML，我创建了一个包含链接的页面，当URL参数与指定的属性匹配时，这些链接会将您带到另一个由对象属性填充的页面。

这是获取参数的JS：

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

对象数组：

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" : ""
}];

如何找到使用URL参数填充页面的正确对象？

Answer 1

首先我建议你创建另一个属性＆＃34; slug＆＃34;防止任何与URL限制相关的问题。（更多信息请访问：Which characters make a URL invalid?）

然后，按照@Alexander的推荐，您可以这样做：

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
}

将URL参数与对象数组

1 个答案: