Can Angular handle properties containing hyphens within them?

Question

Can Angular handle properties containing hyphens within them?

As I embark on creating my first complete Angular application, I encountered an interesting quirk. The model I am working with has a data structure that looks like this:

{
    id: "12345",
    host: {
        name: "someHostServer",
        ip-addresses: [
           "1.2.3.4",
           "10.11.12.13"
        ]
    }
}

When rendering a page and assigning this structure to 'data' in the context, it is done as follows:

ID: {{data.id}}

Host: {{data.host.name}}
IP Addresses:

<span ng-repeat="address in data.host.ip-addresses">
     {{address}}<br />
</span>

The ID and host name display correctly, but the addresses do not appear. Is this due to the hyphen in 'ip-addresses'? If so, is there a simple way to transform the data? The data is fetched from a basic $resource factory.

javascript ajax angularjs templates

Answer 1

Answer №1

When retrieving an object property using the dot notation (.), it is important to note that property names cannot contain hyphens (-).

To access a property with a name containing a hyphen, you must use square brackets like this: ['property-name'].

<div ng-repeat="item in data.list['item-names']">
     {{item}}<br />
</div>

Answer 2

When retrieving an object property using the dot notation (.), it is important to note that property names cannot contain hyphens (-).

To access a property with a name containing a hyphen, you must use square brackets like this: ['property-name'].

<div ng-repeat="item in data.list['item-names']">
     {{item}}<br />
</div>

Answer 3

Answer №2

JSON does not accept properties with hyphens, causing errors in JavaScript even without Angular.

Try using this data format instead:

{ id: "12345", host: { name: "someHostServer, "ip-addresses": [ "1.2.3.4", "10.11.12.13" ] } }

To test it in Chrome Dev tools, use:

console.log({ "name": "someHostServer", "ip-addresses": [ "1.2.3.4", "10.11.12.13" ] });

However, if you use:

console.log({ id: "12345", host: { name: "someHostServer, ip-addresses: [ "1.2.3.4", "10.11.12.13" ] } });

You will encounter an error.

Once you make the necessary changes, your markup should be as follows:

IP Addresses: {{data.host['ip-address']}}

Answer 4

JSON does not accept properties with hyphens, causing errors in JavaScript even without Angular.

Try using this data format instead:

{ id: "12345", host: { name: "someHostServer, "ip-addresses": [ "1.2.3.4", "10.11.12.13" ] } }

To test it in Chrome Dev tools, use:

console.log({ "name": "someHostServer", "ip-addresses": [ "1.2.3.4", "10.11.12.13" ] });

However, if you use:

console.log({ id: "12345", host: { name: "someHostServer, ip-addresses: [ "1.2.3.4", "10.11.12.13" ] } });

You will encounter an error.

Once you make the necessary changes, your markup should be as follows:

IP Addresses: {{data.host['ip-address']}}

Can Angular handle properties containing hyphens within them?

Answer №1

Answer №2

Similar questions

Prevent the router link from being enabled until the submit button has been clicked

Search through an array of objects in mongoose to verify if it includes a collection of strings

Guide to including a promise.map (bluebird) within a nested promise chain

Discover potential routes to nodes using JavaScript

Is there a way to dynamically change the height in jQuery/JavaScript?

Informing the parent window of the child window's activities in order to adjust the timer for the user timeout feature

Tips for accomplishing multiple event triggers and event recollection (benefits that combine features of events and promises)

Creating dynamic canvas elements with images using HTML and JavaScript

How can I update a PHP variable's value after a successful jQuery AJAX call?

Trouble with serving CSS files using Express static directory

The provider for authentication, which is linked to the AuthenticationService and subsequently to the loginControl, is currently unidentified

Searching for a specific value in an array with jQuery: A step-by-step guide

Having trouble applying CSS to multiple classes used in an AJAX call

Does expressJS use the express() function as a global function?

update embed - new command

Troubleshooting the issue of setting an Array as the scope in AngularJS and encountering

Asynchronous requests in Node.js within an Array.forEach loop not finishing execution prior to writing a JSON file

Can you confirm the mobile type, please? Using JavaScript to display a div only once based on the mobile type

Implementing the display of bootstrap modal with error message upon page reload in CodeIgniter

What is the best way to create pages that showcase 10 posts each?