Javascript 从数组中获取前6个元素

我想显示数组中的前6个元素。我使用的是API

'themoviedb'

我从API获取数据并将数据存储在数组中

var url = "https://api.themoviedb.org/3/tv/popular?api_key=YOURKEY&language=en-US&page=1";
var img  = "https://image.tmdb.org/t/p/w500"
var tvSeriesImg = [];

var request = new XMLHttpRequest();     // New instance of XMLHttpRequest
request.open('GET', url, true);         // Open the connection using the 'GET' Method
request.onload = function(){          // Create an onload function this is where the data is displayed on the webpage

var data = JSON.parse(this.response);    // Creating a data variable where our JSON is parsed and stored.

if(request.status >= 200 && request.status < 400){      // Check the request status.

    data.results.forEach(results => {                   //Looping through the JSON Array

        const popTvSeries = document.getElementById('tv-series-data');
        const popTvSeriesCard = document.createElement('div');
        popTvSeriesCard.setAttribute('id', 'card');
        popTvSeries.appendChild(popTvSeriesCard);

        tvSeriesImg.push(results.poster_path);

        //Get the first 6 items from the array!!
        console.log(tvSeriesImg.slice(0, 6));
        const tvImage = document.createElement('img');
        tvImage.src = img + tvSeriesImg.slice(0, 6);
        tvImage.setAttribute('id', 'movieThumb');
        popTvSeriesCard.appendChild(tvImage);
    });
}

}

request.send();  

var url=”https://api.themoviedb.org/3/tv/popular?api_key=YOURKEY&language=en-美国&page=1“；
变量img=”https://image.tmdb.org/t/p/w500"
var tvSeriesImg=[]；
var request=new XMLHttpRequest（）；//XMLHttpRequest的新实例
request.open（'GET'，url，true）；//使用“GET”方法打开连接
request.onload=function（）{//创建一个onload函数这是在网页上显示数据的地方
var data=JSON.parse（this.response）；//创建一个数据变量，用于解析和存储JSON。
如果（request.status>=200&&request.status<400）{//检查请求状态。
forEach（results=>{//在JSON数组中循环
const-popTvSeries=document.getElementById（'tv-series-data'）；
const-popTvSeriesCard=document.createElement（'div'）；
setAttribute（'id'，'card'）；
popTvSeries.appendChild（popTvSeriesCard）；
tvSeriesImg.push（结果、海报路径）；
//从阵列中获取前6项！！
console.log（tvSeriesImg.slice（0,6））；
const tvImage=document.createElement（'img'）；
tvImage.src=img+tvSeriesImg.slice（0,6）；
setAttribute（'id'，'movietumb'）；
popTvSeriesCard.appendChild（tvImage）；
});
}
}
request.send（）；

我已尝试使用切片方法，但出现以下错误：

---

404错误源于：

// you're setting the src of the image as 'https://image.tmdb.org/t/p/w500/val1/val2/val3/val4/val5/val6' which doesn't make sense
tvImage.src = img + tvSeriesImg.slice(0, 6);

尝试替换此块：

console.log(tvSeriesImg.slice(0, 6));


        const tvImage = document.createElement('img');
        tvImage.src = img + tvSeriesImg.slice(0, 6);
        tvImage.setAttribute('id', 'movieThumb');
        popTvSeriesCard.appendChild(tvImage);

为此：

tvSeriesImg.slice(0, 6).map((imgUrl) => {
    const tvImage = document.createElement('img');

    // set src = "https://image.tmdb.org/t/p/w500/valx" where '/valx' is the imgUrl.
    tvImage.src = img + imgUrl;
    tvImage.setAttribute('id', 'movieThumb');
    popTvSeriesCard.appendChild(tvImage);
})

---

希望有帮助

必须为每个TVSERIESMG值创建子img：

var url = "https://api.themoviedb.org/3/tv/popular?api_key=YOURKEY&language=en-US&page=1";
var img  = "https://image.tmdb.org/t/p/w500"
var tvSeriesImg = [];

var request = new XMLHttpRequest();     // New instance of XMLHttpRequest
request.open('GET', url, true);         // Open the connection using the 'GET' Method
request.onload = function(){          // Create an onload function this is where the data is displayed on the webpage

var data = JSON.parse(this.response);    // Creating a data variable where our JSON is parsed and stored.

if(request.status >= 200 && request.status < 400){      // Check the request status.
    data.results.forEach(results => {                   //Looping through the JSON Array
        const popTvSeries = document.getElementById('tv-series-data');
        const popTvSeriesCard = document.createElement('div');
        popTvSeriesCard.setAttribute('id', 'card');
        popTvSeries.appendChild(popTvSeriesCard);

        tvSeriesImg.push(results.poster_path);

        //Get the first 6 items from the array!!
        console.log(tvSeriesImg.slice(0, 6));

        tvSeriesImg.slice(0, 6).forEach(x => {
            const tvImage = document.createElement('img');
            tvImage.src = img + x;
            tvImage.setAttribute('id', 'movieThumb');
            popTvSeriesCard.appendChild(tvImage);
        });
    });
}
}

request.send();  

var url=”https://api.themoviedb.org/3/tv/popular?api_key=YOURKEY&language=en-美国&page=1“；
变量img=”https://image.tmdb.org/t/p/w500"
var tvSeriesImg=[]；
var request=new XMLHttpRequest（）；//XMLHttpRequest的新实例
request.open（'GET'，url，true）；//使用“GET”方法打开连接
request.onload=function（）{//创建一个onload函数这是在网页上显示数据的地方
var data=JSON.parse（this.response）；//创建一个数据变量，用于解析和存储JSON。
如果（request.status>=200&&request.status<400）{//检查请求状态。
forEach（results=>{//在JSON数组中循环
const-popTvSeries=document.getElementById（'tv-series-data'）；
const-popTvSeriesCard=document.createElement（'div'）；
setAttribute（'id'，'card'）；
popTvSeries.appendChild（popTvSeriesCard）；
tvSeriesImg.push（结果、海报路径）；
//从阵列中获取前6项！！
console.log（tvSeriesImg.slice（0,6））；
tvSeriesImg.slice（0,6）.forEach（x=>{
const tvImage=document.createElement（'img'）；
tvImage.src=img+x；
setAttribute（'id'，'movietumb'）；
popTvSeriesCard.appendChild（tvImage）；
});
});
}
}
request.send（）；

这里有一个简化的forEach，可以解决您的问题

const cards = document.getElementById('tv-series-data')

results.forEach(result => {

  const card = document.createElement('div')
  card.id = result.id // ID's should be unique

  card.innerHTML = `<img src="${img}${result.poster_path}">`
  cards.appendChild(card)

})

const cards=document.getElementById（'tv-series-data'））
results.forEach（result=>{
const card=document.createElement（'div'）
card.id=result.id//id应该是唯一的
card.innerHTML=``
卡片。附加子对象（卡片）
})

您所做的工作非常混乱，无法看到正在运行和测试代码的站点。然而，我认为你的问题在于下半场：

//从数组中获取前6项！！
tvSeriesImg.push（结果、海报路径）；
console.log（tvSeriesImg.slice（0,6））；
const tvImage=document.createElement（'img'）；
tvImage.src=img+tvSeriesImg.slice（0,6）；
setAttribute（'id'，'movietumb'）；
popTvSeriesCard.appendChild（tvImage）您是否尝试使用索引i从0开始到5的for looo？您得到的错误是404 HTTP错误，与切片响应无关。为什么要将数组添加到src？请不要链接到外部站点。如果您正在发布错误消息，请在问题中的此处发布错误文本。我不打算点击“ibb”链接。