title: How to use jQuery to read from JSON?
body: <p>I'm trying to figure out how to work with the api from contentful.com. I've created a simple MVC5 app with the following view:</p>
  
  <pre><code>@{
  ViewBag.Title = "Index";
  Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;h2&gt;Contentful Index&lt;/h2&gt;
  
  &lt;div id="pic"&gt;Pic should go here
  
  
  &lt;/div&gt;
  
  @section Scripts{
      &lt;script type="text/javascript"&gt;
      jQuery(document).ready(function () {
          var client = contentful.createClient({
              accessToken: 'b4c0n73n7fu1',
              space: 'cfexampleapi'
          });
  
          var asset = client.asset('nyancat');
  
          $("#pic").css({ 'background-image': asset.fields.file.url });
      });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>When the page loads, I can see using fiddler that I get the following response from cdn.contentful.com:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Date: Mon, 10 Mar 2014 16:54:17 GMT
  Server: nginx/1.1.19
  Content-Type: application/vnd.contentful.delivery.v1+json
  X-Contentful-Request-Id: 85f-830919841
  ETag: "7a92346b83c581d30e36cad903578c5a"
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Headers: Accept,Accept-Language,Authorization,Cache-Control,Content-Length,Content-Range,Content-Type,DNT,Destination,Expires,If-Match,If-Modified-Since,If-None-Match,Keep-Alive,Last-Modified,Origin,Pragma,Range,User-Agent,X-Http-Method-Override,X-Mx-ReqToken,X-Requested-With,X-Contentful-Version,X-Contentful-Content-Type,X-Contentful-Organization
  Access-Control-Allow-Methods: GET,HEAD,OPTIONS
  Access-Control-Max-Age: 86400
  Cache-Control: max-age=0
  Content-Length: 724
  Accept-Ranges: bytes
  Via: 1.1 varnish
  Age: 3578
  X-Served-By: cache-lcy1120-LCY
  X-Cache: HIT
  X-Cache-Hits: 1
  Vary: Accept-Encoding
  Keep-Alive: timeout=10, max=50
  Connection: Keep-Alive
  
  {
    "fields": {
      "title": "Nyan Cat",
      "file": {
        "fileName": "Nyan_cat_250px_frame.png",
        "contentType": "image/png",
        "details": {
          "image": {
            "width": 250,
            "height": 250
          },
          "size": 12273
        },
        "url": "//images.contentful.com/cfexampleapi/4gp6taAwW4CmSgumq2ekUm/9da0cd1936871b8d72343e895a00d611/Nyan_cat_250px_frame.png"
      }
    },
    "sys": {
      "space": {
        "sys": {
          "type": "Link",
          "linkType": "Space",
          "id": "cfexampleapi"
        }
      },
      "type": "Asset",
      "id": "nyancat",
      "revision": 1,
      "createdAt": "2013-09-02T14:56:34.240Z",
      "updatedAt": "2013-09-02T14:56:34.240Z",
      "locale": "en-US"
    }
  }
  </code></pre>
  
  <p>I then get the following error displayed in Chrome console: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'file' of undefined. </p>
  </blockquote>
  
  <p>I've tried <code>console.log(asset)</code> and it does tell me it's undefined. Could anyone please tell me where I went wrong?</p>