asp.net mvc - How to use jQuery to read from JSON? -


i'm trying figure out how work api contentful.com. i've created simple mvc5 app following view:

@{ viewbag.title = "index"; layout = "~/views/shared/_layout.cshtml"; }  <h2>contentful index</h2>  <div id="pic">pic should go here   </div>  @section scripts{     <script type="text/javascript">     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 });     });     </script> } 

when page loads, can see using fiddler following response cdn.contentful.com:

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"   } } 

i following error displayed in chrome console:

uncaught typeerror: cannot read property 'file' of undefined.

i've tried console.log(asset) , tell me it's undefined. please tell me went wrong?

according documentation, seems client.asset() function asynchronous. try this:

var asset = client.asset('nyancat').then(function(asset){     $("#pic").css({ 'background-image': asset.fields.file.url }); }); 

Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -