使用对象名称中的/和变量(JSON)

时间:2017-05-18 17:56:19

标签: javascript json api object dom

我正在使用JSON查询themoviedb.org提供的API。

我想制作剧集列表。为此,我需要访问名为" season / 1"," season / 2"," season / 3"等,但我总是得到错误。

返回的JSON代码如下所示:

"season/1": {
    "_id": "5256c89f19c2956ff6046d47",
    "air_date": "2011-04-17",
    "episodes": [
        {
            "air_date": "2011-04-17",
            "crew": [],
            "episode_number": 1,
            "guest_stars": [],
            "name": "Der Winter naht",
            "overview": "Ein Deserteur der Nachtwache bringt erschreckende Nachrichten von den Ländern nördlich der Mauer, und Lord Eddard \"Ned\" Stark soll die Hand des Königs Robert Baratheon werden.",
            "id": 63056,
            "production_code": "101",
            "season_number": 1,
            "still_path": "/wrGWeW4WKxnaeA8sxJb2T9O6ryo.jpg",
            "vote_average": 7.493,
            "vote_count": 67
        },
        {...},
        .
        .
        .
    ]
}

我的Javascript代码:

var urlBase = 'https://api.themoviedb.org/3/tv/';
var tvId = 'XXX';
var apiKey = '?api_key=MYKEY';
var apiLang = '&language=de_DE';

var descElement = document.getElementById('description');
var titleElement = document.getElementById('title');
var posterElement = document.getElementById('poster');
var castElement = document.getElementById('cast');
var seasonsElement = document.getElementById('seasons');
var episodesElement = document.getElementById('episodes');
var votesElement = document.getElementById('votes');
var epGuideElement = document.getElementById('epGuide');

var showRequest = new XMLHttpRequest();
var showUrl = urlBase + tvId + apiKey + apiLang + '&append_to_response=credits';
showRequest.open('GET', showUrl);
showRequest.send();

showRequest.onload = function() {
    var data = JSON.parse(showRequest.responseText);  
    var title = data.name;
    var description = data.overview;
    var episodes = data.number_of_episodes;
    var seasons = data.number_of_seasons;
    var votes = data.vote_average;
    var cast = '';

    for (i = 0; i < data.credits.cast.length; i++) {
        cast += 
            '<div style="background-color:#dedede;text-align:center;width:145px;height:215px;margin:10px;padding:10px;display:inline-block;float:left;position:relative;"><img src="http://image.tmdb.org/t/p/w90/'
            + data.credits.cast[i].profile_path 
            + '" alt="' 
            + data.credits.cast[i].name 
            + '" style="margin-top:5px;"><br><div style="width:160px;bottom:20px;left:50%;transform:translate(-50%);position:absolute;"><span style="font-size:14px;">' 
            + data.credits.cast[i].character 
            + '</span><br><strong>' 
            + data.credits.cast[i].name 
            + '</strong></div></div>';
    }

    var epGuide = '';

    for (i = 1; i <= seasons; i++) {
        epGuide += '<h3>Staffel ' + i + '</h3>';

        for (ii = 1; ii < data['season/'+i].episodes.length; ii++) {
            epGuide += '<p>Folge ' + (ii + 1) + '</p>';
        }
    }

    titleElement.insertAdjacentHTML('beforeend', title);
    descElement.insertAdjacentHTML('beforeend', description);
    posterElement.src = 'http://image.tmdb.org/t/p/w92' + data.poster_path;
    castElement.insertAdjacentHTML('beforeend', cast);
    episodesElement.insertAdjacentHTML('beforeend', episodes);
    seasonsElement.insertAdjacentHTML('beforeend', seasons);
    votesElement.insertAdjacentHTML('beforeend', votes);
    epGuideElement.insertAdjacentHTML('beforeend', epGuide);

};

如何选择&#34; season / i&#34;带有斜杠的对象和名称中的变量?

//编辑:

你去,整个代码。希望,我们可以找到解决方案。

1 个答案:

答案 0 :(得分:0)

在javascript中,每个变量都是一个hashTable数据结构,您可以像数组/ hashTable一样访问/更改其项目,例如:

var person = {name:'Siamand',family:'Maroufi'};

我们可以通过以下方式访问person对象的name属性:

var name= person.name;

var name =person['name']

因此,在您的情况下,您可以将代码更改为以下内容:

var epGuide = '';

for (i = 1; i <= seasons; i++) {
    epGuide += '<h3>Staffel ' + i + '</h3>';

    for (ii = 1; ii < data['season/'+i].episodes.length; ii++) {
        epGuide += '<p>Folge ' + (ii + 1) + '</p>';
    }
}

示例摘录:

var response = `
  {
  "season/1": {
    "_id": "5256c89f19c2956ff6046d47",
   "episodes": [{
    "air_date": "2011-04-17"
    }]
    }
  }
`;

var data = JSON.parse(response);
var seasons = 2;
var epGuide ="";
for(var i=1;i<seasons;i++){
   epGuide += '<h3>Staffel ' + i + '</h3>';
   for (ii = 0; ii < data['season/'+i].episodes.length; ii++) {
       epGuide += '<p>Folge ' + (ii + 1) + '</p>';
   }
}

console.log(epGuide);

顺便说一下,你使用的api是否存在你之前说过的结果,就像下面这样,它有一个简单的季节阵列

enter image description here