Working with / and variables in object names (JSON)

Question

I'm working with JSON to query the API provided by themoviedb.org.

I want to make a list of episodes. To do so I need to access the length property of several objects named "season/1", "season/2", "season/3" etc., but I get errors all the time.

The returned JSON Code looks as follows:

"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
        },
        {...},
        .
        .
        .
    ]
}

My Javascript code:

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

};

How can I select the "season/i" object with the slash and a variable inside its name?

//EDIT:

There you go, the whole code. Hope, we can find a solution.

What is var `data`? Is it an array? Object? – James May 18 '17 at 18:47 — James, May 18 '17 at 18:47
It's a JSON object provided by the API. – Dennis Przytarski May 19 '17 at 11:54 — Dennis Przytarski, May 19 '17 at 11:54

Siamand · Answer 1 · 2017-05-19T15:23:54.490

0

In the javascript every variable is a hashTable data-structure and you can access/change its items like an array/hashTable for example:

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

we can access the name property of person object by :

var name= person.name;

or

var name =person['name']

so in your case you can change you code into follwoing:

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

example snippet:

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

by the way the api that you are use hasent such result you said before , it something like follwoing, it has a simple array for seasons

edited May 19 '17 at 15:23

answered May 18 '17 at 17:59

Siamand

1,080
10
19

Nope, it doesn't work. Console says: "movie.js:47 Uncaught TypeError: Cannot read property 'episodes' of undefined at XMLHttpRequest.showRequest.onload (movie.js:47)" – Dennis Przytarski May 18 '17 at 18:08
because your data variabe hasnt the season/1 and .. properties , use chrome debugger to finding the data value – Siamand May 18 '17 at 18:13
I edited the question to show you where the data variable comes from. So data is the JSON object. – Dennis Przytarski May 19 '17 at 11:55
where the seasons variable comes from ? – Siamand May 19 '17 at 11:57
I posted the whole code in my question now. – Dennis Przytarski May 19 '17 at 14:50
I just create an example request to this website (themoviedb.org) and the response hasent such result! – Siamand May 19 '17 at 15:19

Working with / and variables in object names (JSON)

1 Answers1