CODEWITHSUNDEEP
jqueryjson
qqruza
qqruza

Reputation: 1417

images from json not displayed

I cannot display images (attachments => images => full => url) from the json below by using jquery and ajax:

{
 "status": "ok",
 "post": {
  "id": 117,
"url": "https:\/\/domain.com\/classifieds\/%d0%bf%d1%80%d0%be%d0%b4%d0%b0%d0%bc-%d0%b0%d0%b2%d1%82%d0%be%d0%bc%d0%be%d0%b1%d0%b8%d0%bb%d1%8c\/",
"title": "\u041f\u0440\u043e\u0434\u0430\u043c \u0430\u0432\u0442\u043e\u043c\u043e\u0431\u0438\u043b\u044c",
"content": "<p>\u0426\u0432\u0435\u0442 \u043a\u0443\u0437\u043e\u0432\u0430: ",
"date": "2013-06-26 10:30:06",
"modified": "2013-06-26 10:33:06",
"tags": [],
"attachments": [
  {
    "images": {
      "full": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf.jpg",
        "width": 650,
        "height": 433
      },
      "large": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf.jpg",
        "width": 650,
        "height": 433
      },
      "small": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf-120x79.jpg",
        "width": 120,
        "height": 79
      },
      "custom-size": {
        "url": "https:\/\/domain.com\/wp-content\/uploads\/2013\/06\/Vw-Golf-650x200.jpg",
        "width": 650,
        "height": 200
      }
    }
  }
]
 }
}

My Jquery is:

 $.ajax({
  url: url_to_json,
  async: false,
  crossDomain: true,
  contentType: 'application/json; charset=utf-8',
  dataType: 'jsonp',
  timeout: 5000,
  success: function (data, status) {
    if (data !== undefined && data.post !== undefined) {
      $('#news').append('<div id="nimg" style="background-image: url(' + data.post.attachments[images].full.url + ')"></div><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div></div>');
    }
  },
  error: function () {
    output.html('<h1 class="error">There was an error loading the data.</h2>');
  }
});

Please help I am newbie with JQUERY. I would really appreciate your assistance here.

Upvotes: 0

Views: 1036

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

There are two problems here

  1. the property accessor is wrong, it should be data.post.attachments[0].images.full.url
  2. the url is javascript escaped, you need to unescape it .replace(/\\\//, '/')

So the it should be

$('#news').append('<div id="nimg" style="background-image: url(' + data.post.attachments[0].images.full.url.replace(/\\\//, '/') + ')"></div><div id="newstext"><div id="newstitle">' + data.post.title + '</div><div>' + data.post.content + '</div></div>');

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Try that:

data.post.attachments[0]['images'].full.url

Or that:

data.post.attachments[0].images.full.url

Upvotes: 3

Related Questions