My solution lets you use JSON to store Shows & Movies.
Within these "Types" of content there are Genres (Horror & Comedy) in my examples.
I take this a step further by using a .htaccess file to allow the URL that the user navigates to decide what content is shown.
For example, you can see on the link below Horror Movies:
or you can automatically load Horror Shows:
.... same for:
I do this by putting a file called ".htaccess" in the folder /jsonMovieData/ so that everything after (in URL path) has specific rules:
Code:
RewriteEngine on
RewriteRule .* index.html [NC]
This simple rule says "anything in the URL after /jsonMovieData/" should show index.html
I do this because my JS in my index.html file uses the URL to load the JSON data, which is why my /Shows/Horror loads properly:
JavaScript:
<script>
window.onload = function(){
// so nothing happens until full page loads
var data = {
"Movies": {
"Horror": {
"0": {
"title": "Saw IV",
"description": "A movie about people dying.",
"release": "Aug 5, 3019",
"rating": "3.5"
},
"1": {
"title": "Some Horror Film",
"description": "A movie about something.",
"release": "April 21, 1993",
"rating": "9"
}
},
"Comedy": {
"0": {
"title": "Spaceballs",
"description": "Better than a Disney Star Wars.",
"release": "Aug 5, 3019",
"rating": "10"
},
"1": {
"title": "Some Funny Film",
"description": "A movie about something.",
"release": "April 21, 1993",
"rating": "9"
}
}
},
"Shows": {
"Horror": {
"0": {
"title": "Some horror tv show",
"description": "A movie about people dying.",
"release": "Aug 5, 3019",
"rating": "3.5"
},
"1": {
"title": "Some Horror tv show number 2",
"description": "A movie about something.",
"release": "April 21, 1993",
"rating": "9"
}
},
"Comedy": {
"0": {
"title": "Some funny tv show",
"description": "whatever you waaaant.",
"release": "Aug 5, 3019",
"rating": "10"
},
"1": {
"title": "Some Funny show i liked",
"description": "A show about something.",
"release": "April 21, 1993",
"rating": "9"
}
}
}
},
url_path = window.location.pathname, // example /Movies/Horror or /Shows/Comedy (for Codeforum.org/Type/Genre scheme)
parts = url_path.split("/"),
genre = parts[parts.length-1], // works if it's example.com/MoviesOrShowHere/GenreHere, would be Horror or Comedy
type = parts[parts.length-2]; // works if it's example.com/MoviesOrShowHere/GenreHere, would be Movies or Shows
pageData = typeof data[type] != 'undefined' && typeof data[type][genre] != 'undefined' ? data[type][genre] : false; // return false if the type (movie or show) or genre (comedy or horror) doesn't exist in data json
if(pageData){ // we have page data
for(var id in pageData){ // loop through each part of Movies or Shows for this specific Genre:
document.querySelector("body").innerHTML += "<h3>"+pageData[id].title+"</h3>Rated "+pageData[id].rating+"/10<br>Released on "+pageData[id].release+"<br>"+pageData[id].description+"<hr>";
// very simple... h3 tag for header text, then shows the rating out of 10, then a break tag so release date is on next line, then the description of the content below that, with a horizontal line <hr> after too
}
}
}
</script>
Adding an image would be as easy as doing something like...
"image": "images/image-name-here.png"
inside of each movie/show
-----
Let's break it down a bit.
First, we have the JSON which you are obviously used to seeing.
After that we use url_path variable for the window location's pathname. Essentially this means getting the whole /folder/folder2/blah/blah2 path from your site. In my example, it is /projects/jsonMovieData/contentType/GenreName. I then break the path into "parts" by separating the content by /slash/, so I'm left with:
parts = ["projects","jsonMovieData","contentType","GenreName"]
I then use parts.length to figure out that (in my example) there are 4 parts.
Well, as you should know, arrays start at 0 so parts[0] = "projects". This is why I use the parts[parts.length - 1] because parts[4] would = undefined, but parts[4 -1] (part 3) = "GenreName"
You can then see that when I do this I am defining the variables "genre" and "type" where genre (in my ex) is either Horror or Comedy and type is either Shows or Movies.
After this I check to make sure that my JSON data has the info for the type of content (data[type]) and genre (data[type][genre]) ... for example, /projects/jsonMovieData/FakeType/FakeGenre would result in my pageData equaling false because data.fakeType.fakeGenre does not exist... On the other hand, data.Movies.Horror DOES exist, so I use if(pageData){ to make sure the genre exists. In a perfect example, you can use an else { statement so that something is shown on the page if the URL is incorrect:
(real example)
I should also add that you could probably do another URL trick like any of the following:
/Movie/Comedy/1 would auto load Movie ID #1 and show other Comedy movies below, or even Comedy Shows
/Shows/Horror/0 would load Horror Show 0
/Shows could load all genres
/Movies could load all genres
/Comedy could load comedy shows AND movies... same for Horror
After this I am looping through each result found for the Type/Genre with a simple for loop. From there I just throw some HTML into the <body> content... Of course, you might be better off doing something like document.getElementById("content-box-id-for-movie-or-show-listings-here");
). But if you have any more questions or questions about what I've written, shout up 
