How I would do:

ECMAScript

const BASE_URL = "https://www.imdb.com/title/";

showtrend.tv_results.forEach(function (result, i) {
    let count = i + 1;
    document.getElementById(`Serie${count}`).textContent = result.title;
    document.getElementById(`Serie${count}ID`).textContent = BASE_URL + result.imdb_id;
    document.getElementById(`Serie${count}Year`).textContent = result.year;
});

Vanilla JS

const BASE_URL = "https://www.imdb.com/title/";

for(var i = 1; i <= showtrend.tv_results.length; i++) {
    document.getElementById('Serie' + i).textContent = result.title;
    document.getElementById('Serie' + i + 'ID').textContent = BASE_URL + result.imdb_id;
    document.getElementById('Serie' + i + 'Year').textContent = result.year;
});

In addition, maybe as your next challenge, try to get rid of these hard-coded elements in the list of "series" and make it dynamically created by pushing elements to an array in Javascript and populating a table or a list reading from this array. This will keep your code even more elegant.

Good luck with your studies!

I think this might help you.

for (let i = 1; i < showtrend.tv_results.length; i++) {
    var name = 'Serie'+ i;
    document.getElementById(name).textContent = showtrend.tv_results[i-1].title ;
    document.getElementById(name+'ID').textContent = "https://www.imdb.com/title/"+showtrend.tv_results[i-1].imdb_id ;
    document.getElementById(name+'Year').textContent = showtrend.tv_results[i-1].year ;
}

Instead of having predefined elements in your page that you have to fill, have one container element, and then iterate over the tv_results array and compile the information from each object into divs, or a table, and then insert that HTML as the innerHTML of the container.

This method will allow you to have as many movies in the data as you need.

const json = '{"showtrend": {"tv_results": [{ "title": "Batman", "imdb_id": 1 },{ "title": "Ratman", "imdb_id": 2 }]}}';

const data = JSON.parse(json);

// Pass in the parsed data
function getHTML(data) {

  // `map` over the tv_results array
  return data.showtrend.tv_results.map(obj => {
    
    // For each object in the iteration return a string of HTML.
    // This method uses a template literal, and adds
    // a data attribute to the outer div to identify the movie.
    return (
      `<div data-id="${obj.imdb_id}" class="movie">
         <div>${obj.title}</div>
         <div>${obj.imdb_id}</div>
       </div>`
    );

  // Finally join the array that `map` returns
  // and return that string
  }).join('');
}

// Cache the container element
const container = document.querySelector('#container');

// Call `getHTML` and add the returned HTML string
// to the `innerHTML` of the container
container.innerHTML = getHTML(data);

.movie { margin-bottom: 0.5em; background-color: #efefef; padding: 0.2em; }

<div id="container"></div>

Additional documentation

• querySelector

• Template/string literals

• map

• join

• Data attributes