Using AngularJS to extract data from a JSON feed that contains a namespace

Just diving into Angular and I'm loving it.

Struggling with parsing a JSON feed that has namespaces, need some help:

Here's an example from the 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",
      "im:link": "www.yahoo.com"
    }
}],

I can parse items without namespaces like this:

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

But struggling to display items with namespaces using these methods:

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

As a newbie, I tried using namespaces in HTML code:

<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 no luck there.

Bonus question: What if a namespace contains attributes with more namespaces?

Any assistance would be greatly appreciated.

Thank you! Roc.


Craig already answered the initial question, but here's a reference for others:

If you want to target a specific key inside an object set like in "im:image":[], use this syntax:

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

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

This will retrieve the label of the third key in that set.

Thanks.

Answer №1

Remove the period following element

Example in action: http://jsfiddle.net/bonza_labs/Kc2uk/

You can retrieve the attributes in the same manner as regular javascript (since angular essentially evaluates the expression as javascript**). element.['foo'] is not a valid expression in javascript. It is appropriate to use square bracket notation when dealing with properties like my:name, which are incompatible with dot notation.

correct:

element.foo
element['foo']

with unconventional property names:

element['foo:bar']
element['foo-bar']

and in your specific scenario:

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

** or a similar enough approach for comprehending this resolution

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The prop type validation failed because a `value` prop was provided to a form field in React-Bootstrap-Typehead component

I am currently using the bootstrap-typehead package from https://github.com/ericgio/react-bootstrap-typeahead and struggling to understand why it's causing issues. Could someone help me identify what's wrong with this code that's triggering ...

Assigning the style of the parent element based on the child element

Currently, I am attempting to develop a customized dropdown field and here is the code I have come up with: const list = document.querySelector('.list'); const listItems = list.getElementsByTagName('p'); document.querySelector('# ...

Incorporating custom HTML5 player to watch Youtube videos on my website

I'm trying to display YouTube videos on my website using a simple video tag. I've managed to retrieve the encoded url of the video from the page source and successfully download it through IDM, but when I try to use this URL as the source for an ...

Guide to deserializing a collection of interfaces within a child element

My ASP.NET MVC2 application features a complex object structure as outlined below: public class IDealer { string Name { get; set; } List<IVehicle> Vehicles { get; set; } } public class DealerImpl { public string Name { get; set; } public Li ...

Why isn't JQuery's .prependTo('body') function functioning correctly?

It's getting late and I should probably call it a night, but I am completely puzzled. I hate to admit it, but why isn't this working?? var informationBox = ''; informationBox += '<div class="informationBox">'; informati ...

Error message: Unhandled error: The function Role.Create is not defined

I'm encountering an issue with a ".create is not a function" error while trying to repopulate my database upon restarting nodemon. Previously, everything was functioning well and all the tables were populated successfully. However, I keep receiving th ...

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

Angular Object Error: Unhandled Exception

As someone who is new to Angular, I am still trying to grasp how it functions. However, I have encountered an issue early on that is causing the below code to produce an "Uncaught Object" error in the console and disrupt Angular functionality. It seems t ...

Using HTML to design interactive buttons that can send API requests and display their current status

Seeking assistance with creating buttons to control a remote light's ON and OFF states while reflecting their status as well. The specific http API calls for the light are necessary to toggle its state. Turn On = http://192.168.102.22:3480/data_requ ...

Executing a cURL request using Node.js

Looking for assistance in converting the request below: curl -F <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a777f7e737b275a73777b7d7f34706a7d">[email protected]</a> <url> to an axios request if possible. ...

Explore the possibilities of Vue by searching through an array of APIs in

As a newcomer to Vuejs, I am currently working on a web app that retrieves images from the Flickr API and stores them in an array. I want to implement a basic search functionality that allows users to filter images based on the keyword entered, but I am un ...

The most effective method for adding data to a <pre /> element is through VueJS

I have an electron app that executes a program and stores the output when data is received. My goal is to showcase the content of this output within an html pre element. One approach I can take is to create a variable and continuously add the output data ...

Currently, I am attempting to retrieve text input through the use of AngularJS

Having trouble retrieving text input values using Angular JS? The console keeps showing undefined. <div ng-controller="favouritesController" class="col-xs-12 favList"> <input type="text" ng-model="newFav" ng-keyup= "add($event)" class="col-xs-1 ...

Is it possible to utilize Vue's splice method within a forEach loop in order to delete multiple elements at

I am currently working on an image grid in array form. I am trying to implement a multi-deletion functionality. When a checkbox for each image in the grid is checked, I store the selected image's index in an array called selectedImages. Upon clickin ...

Navigation bar transforms color once a specific scroll position is reached

My website features a sleek navbar fixed to the top of the window. As users scroll past a specific div, the background color of the navbar changes seamlessly. This functionality has been working flawlessly for me thus far. However, upon adding anchor link ...

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

How to retrieve attributes of a model from a related model in Sails.js

Currently, I am utilizing the beta version(v0.10.0-rc3) of Sails.js and have updated the database adapter to PostgreSQL in order to enable associations via the Waterline ORM. My main focus is on creating a role-based user model for authorization based on d ...

"Process the contents of a file by reading it line by line in a

Currently, I am reviewing the documentation for the nodejs readline module in order to tackle a task that involves reading a very large file line by line. The solution using readline seems promising, although I require it to read lines synchronously - mean ...

Message: Code=3840: "Character at index 0 is incorrect."

Currently, I am facing a challenge while developing an iOS app. I am encountering issues with user registration as I receive a Code 3840 error stating "Invalid value around character 0". The technologies I am using for this project include Swift, PHP, and ...