如何在访问json数据时使用循环保存代码?

Question

我最近开始了我的第一个编程项目。我开始注意到我一遍又一遍地使用相同的代码，并且想要保存它。

下面是一个例子:

document.getElementById('Serie1').textContent = showtrend.tv_results[0].title ;
document.getElementById('Serie1ID').textContent = "https://www.imdb.com/title/"+showtrend.tv_results[0].imdb_id ;
document.getElementById('Serie1Year').textContent = showtrend.tv_results[0].year ;
document.getElementById('Serie2').textContent = showtrend.tv_results[1].title ;
document.getElementById('Serie2ID').textContent = "https://www.imdb.com/title/"+showtrend.tv_results[1].imdb_id ;
document.getElementById('Serie2Year').textContent = showtrend.tv_results[1].year ;

我基本上是从我的api到我的网站以json的形式添加值。

但是我怎样才能把所有这些放到一个循环中呢?就像另一个10系列，蚂蚁不是很优雅

非常感谢你的帮助

Answer 1

我想这可能对你有帮助。

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

Answer 2

我会怎么做:

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

香草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;
});

此外，也许作为您的下一个挑战，尝试在"series"列表中删除这些硬编码元素。并通过将元素推入Javascript中的数组并填充从该数组读取的表或列表来动态创建它。这将使你的代码更加优雅。

祝你学习顺利!

Answer 3

在你的页面中没有预定义的元素，你必须填充，有一个容器元素，然后遍历tv_results数组，并将每个对象的信息编译成div或表，然后插入该HTML作为容器的innerHTML。

此方法将允许您在数据中拥有尽可能多的电影。

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>

附加文档

• querySelector

• 模板/字符串文字

• map

• join

• 数据属性