format json in rails3 - ruby-on-rails-3

Question

I'm trying to access a JSON version of my variable. I tried using . notation on the shows variable as I presumed it was now formatted as a json object. #shows.title but that caused an error.
I tried to use #shows.to_json.title for it to work but still no good. I thought when you format.json it already calls the to_json and that was the idea of using format or am in incorrect in thinking this way. If so what does format do then.
class ShowsController < ApplicationController
# GET /shows
# GET /shows.json
def index
#shows = Show.all
respond_to do |format|
format.html # index.html.erb
format.json { render json: #shows }
end
end
index.html.erb
<p> #shows.title <p>
the structure I'm looking for in JSON would be like this.
[
{
"id": "feature",
"width":570,
"title": "Lorem ipsum dolor amet emipsum do omnis iste natus",
"description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantiu mdoloremque laudantium.",
"img": "img/work/img1.jpg",
"url": "http://www.bla.com"
},
{
"id": "show",
"width":200,
"title": "Lorem ipsum dolo",
"description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantiu mdoloremque laudantium.",
"img": "img/work/img2.jpg",
"url": "http://www.bla.com"
}
]
UPDATED: maybe I'm not explaining this correctly.
My goal here is to have my action in the controller call the index.html page, which it does now. On that page is a jquery plugin that requests a JSON object with all the data from the database. This way it can parse through the JSON and render all the objects on the index.html page using jquery plugin. The reason for this is it's using a plugin called jquery.masonry.js & jquery.infinitescroll.js which is now setup to use multiple JSON structures to create my pages.

Answer 1

If you need your collection to be accessible to jquery, then you can render it as a json string inside of a script block. So for example in your index.html.erb you could put:
<%= javascript_tag "var shows = #{#shows.to_json}" %>
Which will render
<script type="type/javascript"> var shows = { "your":"json", "object":"YAY" } </script>
But you still want to respond_to html