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
Post a Comment