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

#1 lysdexik  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 27-September 11

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.

This is the code that I used to create the single div

  <div id="Shows"></div>

    <script>
  $.getJSON('data.json', function(data) {
        var output="<ul>";
        for (var i in data.Shows) {
            output+="<li>" + data.Shows[i].title + "</li>" +
            		"<li>" + data.Shows[i].id + "</li>" +
            		"<li>" + data.Shows[i].year + "</li>" +
            		"<li>" + data.Shows[i].ratings.user_score + "</li>";
        }

        output+="</ul>";
        document.getElementById("Shows").innerHTML=output;
  });
    </script>



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.

This post has been edited by lysdexik: 08 October 2012 - 09:23 AM


Is This A Good Question/Topic? 0
  • +

Replies To: TV Show Organizer using jQuery + JSON

#2 sas1ni69  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 85
  • View blog
  • Posts: 431
  • Joined: 04-December 08

Re: TV Show Organizer using jQuery + JSON

Posted 08 October 2012 - 07:23 PM

Hi there,

Why don't you add new divs to the output? And perhaps use the movie id as the id for each individual div. Maybe something like this;

<div id="Shows"></div>

  <script>
$.getJSON('data.json', function(data) {
      var output="<div id='" + data.Shows[i].id +"' class='individualShow'> <ul>";
      for (var i in data.Shows) {
          output+="<li>" + data.Shows[i].title + "</li>" +
          		"<li>" + data.Shows[i].id + "</li>" +
          		"<li>" + data.Shows[i].year + "</li>" +
          		"<li>" + data.Shows[i].ratings.user_score + "</li>";
      }

      output+="</div></ul>";
      document.getElementById("Shows").innerHTML=output;
});
  </script>





Then play around with the CSS to make it appear different from each other. Hope this helps.
Was This Post Helpful? 2
  • +
  • -

Page 1 of 1