current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

New to angular, and it is awesome.

One thing I am having a brain fart on is parsing a JSON feed that contains namespaces:

Example from JSON feed:

"title": {
  "label": "Fuse"
},
"im:name": {
   "label": "John Doe"
},
"im:image": [ {
    "label": "70x70",
    "attributes": {
      "height": "55"
    }
  }, {
    "label": "80x80",
    "attributes": {
      "height": "60",
      "im:link": "www.google.com"
    }
  }, {
    "label": "90x90",
    "attributes": {
      "height": "170"m
      "im:link": "www.yahoo.com"
    }
}],

I can successfully parse items without namespaces fine like so:

<p ng-repeat="item in results.feed['entry']">
            title: {{item.title['label']}}
</p>

But cannot get the items with namespaces to display using:

            name: {{item.['im:name']['label']}}
OR
            name: {{item.['im-name']['label']}}
OR
            name: {{item.['im->name']['label']}}

Since being a newbie, I thought something like this would work:

<div xmlns:im="http://www.aol.com" id="im-app" im-app="im">
  <p ng-repeat="item in results.feed['entry']">
   …namespace code in here…
  </p> 
</div>

But that did not help.

Extra bonus question: What if a namespace contains attributes, that also contain namespaces?

Any help would greatly be appreciated.

Thanks! Roc.

Although Craig answered the question,

This is also for reference for others:

If you want to target a specific key inside of an object set:

"im:image":[
  {
    "label":google",
    "attributes":{
      "height":"55"
    }
  },
  {
    "label":"yahoo",
    "attributes":{
      "height":"60"
    }
  },
  {
    "label":"aol",
    "attributes":{
      "height":"170"
  }
}

{{item['im:image'][2]['label']}}

Will get the 3rd key in that set.

Thanks.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Get rid of the dot after item

Working example: http://jsfiddle.net/bonza_labs/Kc2uk/

You access the properties exactly the same way as straight javascript (because angular is basically eval()-ing the expression as javascript**). item.['foo'] is not valid javascript. You are correct in using square-bracket notation as my:name is not valid for dot-notation.

valid:

item.foo
item['foo']

with non-standard property names:

item['foo:bar']
item['foo-bar']

and in your case:

{{item['im:name']['label']}}

** or close enough for understanding this solution

share|improve this answer
    
Hey Craig! Thanks! I accidently wrote that part of the code wrong. It was suppose to actually be {{artist.im-artist['label']}}, although what you wrote has helped me greatly and got it working. Thanks for the heads up on the non-standard property names. –  Roc Sep 17 '13 at 0:59
    
Hi Craig, since this deals with the same concept, I thought it would be unnecessary to create a new thread for this question. If you take a look here: link, if a element contains keys that have the same name, how can I specifically target the 3rd key in line? I've tried {{artist['im:image']['label(3)']}} and {{artist['im:image']['label'][3]}}, but to no avail. – Roc 16 mins ago –  Roc Sep 17 '13 at 2:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.