javascript - 如何在 Javascript 而不是 URL 的另一个 index.html 网页中以文本格式显示对象属性?
问题描述
下面是我编写的用于获取电影图像的函数,并将这些图像与 Trending_movie.overview 属性超链接。
当我单击图像时,我收到下面提到的错误,该函数正在将属性 Trending_movie.overview 转换为某种 URL错误是:-
无法获取 /A%20group%20of%20vigilantes%20known%20informally%20as%20%E2%80%9CThe%20Boys%E2%80%9D%20set%20out%20to%20take%20down%20corrupt% 20个超级英雄%20个%20个%20个%20个%20个蓝领%20个%20个%20个%20个%20个%20个%20个战斗%20个脏。
function getTrendingMovies(Trending_movies){
const trending = document.createElement('div')
trending.setAttribute('class','All_trending_movies')
Trending_movies.map((Trending_movie)=>{
const img =document.createElement('img');
const a= document.createElement('a');
a.setAttribute('href',Trending_movie.overview);
img.src=image_url + Trending_movie.backdrop_path;
a.appendChild(img);
trending.appendChild(a);
});
return trending;
}
对象如下:-
Trending_movies:
backdrop_path: "/mGVrXeIjyecj6TKmwPVpHlscEmw.jpg"
first_air_date: "2019-07-25"
genre_ids: (2) [10759, 10765]
id: 76479
media_type: "tv"
name: "The Boys"
origin_country: ["US"]
original_language: "en"
original_name: "The Boys"
overview: "A group of vigilantes known informally as “The Boys” set out to take down corrupt superheroes with no more than blue-collar grit and a willingness to fight dirty."
popularity: 1707.804
poster_path: "/mY7SeH4HFFxW1hiI6cWuwCRKptN.jpg"
vote_average: 8.4
vote_count: 2162
我想在新网页上以文本格式而不是 URL 显示概览属性。
任何形式的帮助将不胜感激......
解决方案
将overview
属性设置href
为锚元素的值。然后将其设置href
为您的index2.html
并在其后添加?id=
。之后的值=
应该是id
的Trending_movie
。
function getTrendingMovies(Trending_movies){
const trending = document.createElement('div')
trending.classList.add('All_trending_movies')
Trending_movies.map((Trending_movie)=>{
const img = document.createElement('img');
const a = document.createElement('a');
img.src = image_url + Trending_movie.backdrop_path;
a.appendChild(img);
a.textContent = Trending_movie.overview;
a.href = `index2.html?id=${Trending_movie.id}`
trending.appendChild(a);
});
return trending;
}
然后在您的 index2.html 上,您可以从 URL 中获取要显示的电影的 id。在那里创建一个新的脚本文件,您将在其中阅读id
并循环播放您的热门电影。
流行电影数组上的find
方法将帮助您从数组中检索与 id 匹配的单个对象。
const params = new URLSearchParams(location.search); // Parses the URL
const id = params.get('id'); // Gets the ID from the URL.
/**
* Function that loops through the trending movies
* and returns the trending movie object that has
* the same ID as is passed through the second param.
* Or returns undefined when it is not found.
*/
function getTrendingMovieById(trendingMovies, id) {
return trendingMovies.find(movie => {
return movie.id === id
});
}
// Now you get the trending movie you are looking for by id.
const trendingMovie = getTrendingMovieById(Trending_movies, id);
// Then check if it is found, if not stop the script.
if (trendingMovie === undefined) {
return;
}
// Now you can do stuff with your single trending movie.
console.log(trendingMovie);
推荐阅读
- c# - 在没有 AddForce 的情况下,如何在用鼠标拖动 2d 对象后抛出它们?
- bash - 如何将 sed 与 here-document 一起使用?
- shell - 读取当前时间并在接下来的 2 小时内增加 1 分钟并运行一些命令
- android - Android 录音,应用快速傅里叶变换
- java - 为验证字符串输入编写参数化测试的最佳实践是什么?
- centos - 为什么在复制文件夹时 Ansible 仍然提供最后的“空”权限?
- r - 将数据帧作为表格写入剪贴板偏移结果
- javascript - chrome 无法运行 console.log() Uncaught SyntaxError: Invalid or unexpected token
- jquery - 根据所选选项值更改用于功能的值?
- sql - SQL 选择中的减法返回 0