如何在 Javascript 中的另一个 index.html 网页中以文本格式而不是 URL 显示对象属性？

Question

下面是我编写的一个获取电影图像的函数，并将这些图像与 Trending_movie.overview 属性进行超链接。
当我单击图像时，出现以下错误，该函数正在将 Trending_movie.overview 属性转换为某种 URL

错误是：-
无法 GET /A%20group%20of%20vigilantes%20known%20informally%20as%20%E2%80%9CThe%20Boys%E2%80%9D%20set%20out%20to%20take%20down%20corrupt%20superheroes%20no%20 %20more%20than%20blue-collar%20grit%20and%20a%20willingness%20to%20fight%20dirty。

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 显示新网页上的概览属性。
任何形式的帮助将不胜感激...

Answer 1

将overview属性设置为锚元素的href值。 然后将href设置为您的index2.html并在index2.html添加?id= 。 =后面的值应该是Trending_movie的id 。

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);