如何获取iTunes电影4K/Dolby/HDR元数据并批量展示至网站？

一、解决获取更多影片的问题 #

1. 修复代码逻辑顺序错误 #

你当前代码把影片数据处理逻辑写在了fetch请求外部，会导致data未定义报错，必须将这些逻辑移到fetch的回调内部：

function fetchRecentDiscountedMovies() {
    const url = 'https://itunes.apple.com/search?term=movie&media=movie&limit=200'; 

    fetch(url)
        .then(response => response.json())
        .then(data => {
            const movies = data.results;
            const discountedMovies = movies.filter(movie => movie.trackPrice < 5); // 过滤低价促销影片
            const movieContainer = document.getElementById('movie-container');
            movieContainer.innerHTML = ''; // 清空之前的结果
            
            // 渲染影片列表
            discountedMovies.forEach(movie => {
                const movieElement = document.createElement('div');
                movieElement.innerHTML = `<h3>${movie.trackName}</h3><p>价格: $${movie.trackPrice}</p>`;
                movieContainer.appendChild(movieElement);
            });
        })
        .catch(error => console.error('获取数据失败:', error));
}

2. 突破单次请求数量限制 #

iTunes Search API的limit参数最大支持200，若需要更多影片，可通过分页请求结合offset参数实现：

async function fetchAllDiscountedMovies() {
    const limit = 200;
    let offset = 0;
    let allMovies = [];
    const maxAttempts = 5; // 限制请求次数避免无限循环
    let attempts = 0;

    while (attempts < maxAttempts) {
        try {
            const url = `https://itunes.apple.com/search?term=movie&media=movie&limit=${limit}&offset=${offset}`;
            const response = await fetch(url);
            const data = await response.json();
            const newMovies = data.results;
            
            if (newMovies.length === 0) break; // 无更多数据时停止
            
            allMovies = [...allMovies, ...newMovies];
            offset += limit;
            attempts++;
            await new Promise(resolve => setTimeout(resolve, 1000)); // 添加延迟避免限流
        } catch (error) {
            console.error('分页请求失败:', error);
            break;
        }
    }

    // 过滤促销影片并渲染
    const discountedMovies = allMovies.filter(movie => movie.trackPrice < 5);
    const movieContainer = document.getElementById('movie-container');
    movieContainer.innerHTML = '';
    discountedMovies.forEach(movie => {
        const movieElement = document.createElement('div');
        movieElement.innerHTML = `<h3>${movie.trackName}</h3><p>价格: $${movie.trackPrice}</p>`;
        movieContainer.appendChild(movieElement);
    });
}

• 可优化搜索关键词，比如用term=new+movie筛选新上线影片，或指定genreId缩小范围。

二、实现4K、Dolby Atmos、HDR标签显示 #

iTunes Search API基础数据无直接规格标签，可通过以下两种方式实现：

1. 调用Lookup API获取详细信息 #

通过影片trackId调用Lookup API，从详细描述中提取规格关键词：

async function getMovieDetails(trackId) {
    const url = `https://itunes.apple.com/lookup?id=${trackId}`;
    const response = await fetch(url);
    const data = await response.json();
    return data.results.length > 0 ? data.results[0] : null;
}

// 渲染带标签的影片
async function renderMovie(movie) {
    const details = await getMovieDetails(movie.trackId);
    const tags = [];
    const description = details?.longDescription || details?.description || '';
    
    if (description.includes('4K')) tags.push('4K');
    if (description.includes('Dolby Atmos')) tags.push('Dolby Atmos');
    if (description.includes('HDR')) tags.push('HDR');
    
    const tagsHtml = tags.map(tag => `<span class="tag">${tag}</span>`).join('');
    const movieElement = document.createElement('div');
    movieElement.innerHTML = `
        <h3>${movie.trackName}</h3>
        <p>价格: $${movie.trackPrice}</p>
        <div class="tags">${tagsHtml}</div>
    `;
    return movieElement;
}

2. 直接从Search API描述提取关键词 #

若不想额外请求，可直接用Search API返回的description字段：

// 在渲染循环中添加标签逻辑
discountedMovies.forEach(movie => {
    const tags = [];
    const description = movie.description || '';
    
    if (description.includes('4K')) tags.push('4K');
    if (description.includes('Dolby Atmos')) tags.push('Dolby Atmos');
    if (description.includes('HDR')) tags.push('HDR');
    
    const tagsHtml = tags.map(tag => `<span class="tag">${tag}</span>`).join('');
    const movieElement = document.createElement('div');
    movieElement.innerHTML = `
        <h3>${movie.trackName}</h3>
        <p>价格: $${movie.trackPrice}</p>
        <div class="tags">${tagsHtml}</div>
    `;
    movieContainer.appendChild(movieElement);
});

标签样式参考 #

给标签添加基础样式提升视觉效果：

.tag {
    display: inline-block;
    padding: 4px 8px;
    margin: 0 4px 4px 0;
    background-color: #0071e3;
    color: white;
    border-radius: 4px;
    font-size: 12px;
}

内容的提问来源于stack exchange，提问作者Adil Account