How can I display the object property in text format inside the another index.html webpage in Javascript instead of an URL?

Below there is a function I wrote to get Movies images and I hyperlinked those images with the Trending_movie.overview property.
When I click on the image I get the below-mentioned error ,the Function is converting the property Trending_movie.overview into somekind of URL

The Error is :-
Cannot GET /A%20group%20of%20vigilantes%20known%20informally%20as%20%E2%80%9CThe%20Boys%E2%80%9D%20set%20out%20to%20take%20down%20corrupt%20superheroes%20with%20no%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;
    }

The Object is given below:-

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

I want to display the overview property on the new webpage in the text format instead of the URL.
Any kind of help would be appreciated…

Answer

Set the overview property to the href value of the anchor element. Then set the href to your index2.html and add ?id= after it. The value after the = should be the id of the 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;
}

Then on your index2.html you get the id of the movie that you want to show from the URL. There create a new script file where you will read the id and loop through your Trending movies.

The find method on the trending movies array will help you retrieve a single object from the array that matches the 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);