javascript - 我怎样才能得到json数据的下一个值
问题描述
var data = [
{
"season": 1,
"episode": 1,
"name": "x series 1. season 1. episode",
},
{
"season": 1,
"episode": 2,
"name": "x series 1. season 2. episode",
},
{
"season": 1,
"episode": 3,
"name": "x series 1. season 3. episode",
},
{
"season": 2,
"episode": 1,
"name": "x series 2. season 1. episode",
},
]
例如,如果选择的第 1 季是第 2 集,我怎样才能得到之后的第 1 季第 3 集,然后下一个?我怎样才能为此编写一个函数?
var current = data[1];
console.log(current) // 1st season 2nd episode
/*
episode: 2
name: "x series 1. season 2. episode"
season: 1
*/
我想获取当前第 1 季第 3 集数据的下一个数据
解决方案
我用 HTML 重现了你的情况。您必须跟踪当前选定的对象并执行下一个操作。尝试这个-
var data = [
{"season": 1,"episode": 1,"name": "x series 1. season 1. episode",},
{"season": 1,"episode": 2,"name": "x series 1. season 2. episode",},
{"season": 1, "episode": 3, "name": "x series 1. season 3. episode",},
{"season": 2, "episode": 1, "name": "x series 2. season 1. episode"},
];
const showEl = document.getElementById('show');
const nextEl = document.getElementById('next');
// Assume the season 1 episode 1 is the initial item.
let current = {season: 1, episode: 1};
// Attach the click event listener to the next button.
nextEl.addEventListener('click', () => {
goToNext();
});
// Show the episode name to the show element.
function show(serial) {
const _show = data.find(item => item.season === serial.season && item.episode === serial.episode);
showEl.innerHTML = _show.name;
}
// Initially show the season 1 episode 1 item.
show(current);
// Go to the next episode function.
function goToNext() {
const {season, episode} = current;
// Check if the next episode of the current season exists or not.
let nextItem = data.find(item => item.season === season && item.episode === episode + 1);
// If the next episode of the current season not found then check the next season's
// episode 1
if (!nextItem) {
nextItem = data.find(item => item.season === season + 1 && item.episode === 1);
}
// If item found then update the current item to the next episode item.
// And show the current episode.
if (!!nextItem) {
current = nextItem;
show(current);
}
}
<div id="show"></div>
<button id="next">Next</button>
推荐阅读
- jquery - 从赛普拉斯的选择器中获取标签
- r - R中的快速并行二分距离计算
- flutter - Flutter:如何在已经访问过的页面出现时始终触发功能
- javascript - JavaScript 等待两个函数完成并继续执行函数三
- cuda - 如何使用指针使用推力::copy_if
- oracle - ORACLE - 展平数据
- reactjs - 在 ReactJS 中集成时出现 WalletConnect 错误 - Uncaught (in promise) TypeError: this.send is not a function
- sql - 如何有效地连接这些列(多行) MS SQL
- outlook - MailboxNotEnabledForRESTAPI - Microsoft Graph API 与启用 HMA 的本地服务器集成
- php - 测试 facebook business-sdk 时出错