Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I access an '@attr' value in JSON with jQuery

I'm working with the last.fm api to get artist images, and I'm getting JSON results where I need to check an '@attr' value. Unfortunately, I can't seem to access this value. The results look something like:

{"image":[{
    "url":"http:\/\/www.last.fm\/music\/Undefined\/+images\/3040021",
    "format":"jpg",
    "sizes":{"size":{"#text":"http:...jpg","name":"original","width":"397","height":"397"},{"#text":"http:...jpg","name":"large","width":"126","height":"126"},]},
    "@attr":{"official":"yes"}}

it's that last value that I can't get to...

any ideas?

I tried ['@attr'] and it didnt' seem to work - only returned undefined.

I'm doing an $.each(obj.image, function(){}) - and within i'm successfully getting this.url, this.format, etc - but i'm not having luck with this['@attr']

like image 917
majman Avatar asked Nov 10 '09 17:11

majman


People also ask

How to get the attr value in jQuery?

The attr() method sets or returns attributes and values of the selected elements. When this method is used to return the attribute value, it returns the value of the FIRST matched element. When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.

How to get attribute name in jQuery?

To get the name, you'd use $(selector). attr('name') which would return (in your example) 'xxxxx' . Save this answer.


2 Answers

Use the bracket notation member operator:

var value = obj[0]['@attr'];

Then you can access the official property by:

value.official;

Or

obj[0]['@attr']['official'];

Or

obj[0]['@attr'].official;

Edit: As Jonathan pointed out, you have issues with the JSON structure you post, I would recommend you to validate your JSON with a tool like JSONLint.

But I think that you mean something like this:

var obj = {
  "image": [{
    "url": "http:\/\/www.last.fm\/music\/Undefined\/+images\/3040021",
    "format": "jpg",
    "sizes": [{
      "#text": "http:...jpg",
      "name": "original",
      "width": "397",
      "height": "397" 
    },
    {
      "#text": "http:...jpg",
      "name": "large",
      "width": "126",
      "height": "126" 
    } 
    ],
    "@attr": {
      "official": "yes" 
    } 
  }]
};

And with that JSON structure you can iterate it by:

$.each(obj.image, function () {
  alert(this['@attr'].official);
});
like image 193
Christian C. Salvadó Avatar answered Sep 19 '22 18:09

Christian C. Salvadó


You have quite a few formatting issues in your snippet. If these are the same in your actual JSON, you're going to have parsing and object-structure conflicts from what you're probably expecting.

{ /* no matching end */
    "images": [ /* no matching end */
        {
            "url":"http:\/\/www.last.fm\/music\/Undefined\/+images\/3040021",
            "format":"jpg",
            "sizes": { /* should this be an array instead? */
                "size": {
                  "#text":"http:...jpg",
                  "name":"original",
                  "width":"397",
                  "height":"397"
                },
                { /* missing key */
                  "#text":"http:...jpg",
                  "name":"large",
                  "width":"126",
                  "height":"126"
                }, /* trailing comma can cause parsing issues */
              ] /* no matching start */
            },
            "@attr": { "official":"yes" }
        }
like image 23
Jonathan Lonowski Avatar answered Sep 21 '22 18:09

Jonathan Lonowski