1 Replies - 1170 Views - Last Post: 08 October 2012 - 07:23 PM

TV Show Organizer using jQuery + JSON

Posted 08 October 2012 - 09:20 AM

Hey all,

I am trying to create a system to store TV show information using Javascript, jQuery, and a JSON file.

Within my JSON file I have data that looks like this:

{"Shows":[
{
"id": "123456789",
"title": "Arrested Development",
"year": 2003,
"review": "Level-headed son Michael Bluth takes over family affairs after his father is imprisoned. But the rest of his spoiled, dysfunctional family are making his job unbearable"
},
"ratings": {
"user_rating": "9.3",
},
"synopsis": "Michael Bluth, a widower with a 13-year-old son, named George- Michael, is forced to keep his large and dysfunctional family together after his father is arrested for shifty accounting practices at the family-owned conglomerate and the Bluth family assets are frozen, making each member of the eccentric family panic. Michael's snobbish mother, Lucille, finds herself living alone in a penthouse without the financial means to maintain it, while Michael's two brothers, GOB and Buster, and his sister Lindsay with her husband Tobias and her daughter Maeby also find themselves having to recreate their lifestyles to fit their new financial status.",
"posters": {
"thumbnail": "http://ia.media-imdb.com/images/M/MV5BMTIzNDU0OTc1NF5BMl5BanBnXkFtZTcwODI0ODYyMQ@@._V1._SY317_CR6,0,214,317_.jpg"
},
"cast": [
{
"name": "Jason Bateman",
"id": "24243542",
"characters": ["Michael Bluth"]
}, {
"name": "Portia de Rossi",
"id": "24243543",
"characters": ["Linday Bluth Funke"]
}, {
"name": "Michael Cera",
"id": "24243544",
"characters": ["George-Michael Bluth"]
}, {
"name": "David Cross",
"id": "24243545",
"characters": ["Tobian Funke"]
}, {
"name": "Will Arnett",
"id": "24243546",
"characters": ["Gob Bluth"]
}
]
},
//Next show starts here
{
"id": "123456789",
"title": "Arrested Development",
"year": 2003,
"review": "Level-headed son Michael Bluth takes over family affairs after his father is imprisoned. But the rest of his spoiled, dysfunctional family are making his job unbearable"
},
"ratings": {
"user_rating": "9.3",
},
"synopsis": "Michael Bluth, a widower with a 13-year-old son, named George- Michael, is forced to keep his large and dysfunctional family together after his father is arrested for shifty accounting practices at the family-owned conglomerate and the Bluth family assets are frozen, making each member of the eccentric family panic. Michael's snobbish mother, Lucille, finds herself living alone in a penthouse without the financial means to maintain it, while Michael's two brothers, GOB and Buster, and his sister Lindsay with her husband Tobias and her daughter Maeby also find themselves having to recreate their lifestyles to fit their new financial status.",
"posters": {
"thumbnail": "http://ia.media-imdb.com/images/M/MV5BMTIzNDU0OTc1NF5BMl5BanBnXkFtZTcwODI0ODYyMQ@@._V1._SY317_CR6,0,214,317_.jpg"
},
"cast": [
{
"name": "Jason Bateman",
"id": "24243542",
"characters": ["Michael Bluth"]
}, {
"name": "Portia de Rossi",
"id": "24243543",
"characters": ["Linday Bluth Funke"]
}, {
"name": "Michael Cera",
"id": "24243544",
"characters": ["George-Michael Bluth"]
}, {
"name": "David Cross",
"id": "24243545",
"characters": ["Tobian Funke"]
}, {
"name": "Will Arnett",
"id": "24243546",
"characters": ["Gob Bluth"]
}
]
}
]}

What I have here is an array of objects containing unique attributes for each show that I want to represent on a webpage. For the sake of simplicity I used the same information for both shows in order to show the structure of my code.

I have figured out how to read the JSON file with a loop and store whichever attribute I would like in an unordered list within a div.

What I am trying to do is to store each TV show in it's own div with it's own unique ID so that I can write a loop to append each div as an HTML node to a select list. From there I will be able to sort the shows, filter out what I want to see in the list and what I don't.

The above code works to create a single div, but I need to create individual divs for each show and assign them a unique ID so that I can manipulate them.

Eventually I will be able to add a thumbnail to each div and put the divs into a scrollable list, and when clicked on expand the information about the show.

Let me clarify, the only thing that I am looking for help on is how to create multiple divs with unique ID's from the JSON file and append attributes of my choosing to each. Once I figure out how to do this, I will play around with advanced functionality.