AngularJS How do I access JSON from a directive

Question

I have written the following directive:

var gameOdds = function(){
    return {
        template: '{{games["@homeTeam"]}} vs {{games["@awayTeam"]}}',
        scope: {
            games: '@'
        }
    };
};

<div game-odds games="{{games}}">

This uses the following JSON data (part of the json is below):

{
    @id: "69486",
    @homeTeam: "Home Team",
    @awayTeam: "Away Team",
    otherNormalValues : {
        etc: "normal..."
    }
}

I know that the method of selecting these keys preceded with an @ symbol works when put directly into the HTML bound to a controller. But in my directive I cannot select the fields in this ["@field"] way.

Does anyone know how to do this?

is games an array of objects? Suggest you create a simple demo with real data and controller. Not sure why you have @ prefix for all your properties — charlietfl
– charlietfl, Commented Sep 12, 2014 at 11:16
Games contains the JSON shown. I don't know why the JSON returns @ symbols, it is a third party API. — jackdaw
– jackdaw, Commented Sep 12, 2014 at 11:36

ryeballar · Accepted Answer · 2014-09-12 13:03:42Z

2

Instead of using the attribute object notation, @, you can use the = instead.

DEMO

JAVASCRIPT

  .directive('gameOdds', function() {
    return {
      template: '{{games.homeTeam}} vs {{games.awayTeam}}',
      scope: {
        games: '='
      }
    }
  });

HTML

<div game-odds games="games"></div>

Update: Sorry for the late reply, as what the accepted answer had mentioned, you can access them with the [] notation, if the key starts with special characters in it:

  .directive('gameOdds', function() {
    return {
      template: '{{games['@homeTeam']}} vs {{games['@awayTeam']}}',
      scope: {
        games: '='
      }
    }
  });

edited Sep 12, 2014 at 13:03

answered Sep 12, 2014 at 11:15

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jackdaw Over a year ago

This doesn't solve the problem for me. I cannot reference games.awayTeam because it contains an @ symbol. games.awayTeam would return undefined. games["@awayTeam"] returns the team name.

Joao Leal Over a year ago

IT's the same, just replace his template with yours. The key point is to use = and pass games instead of {{games}}. With @ you are passing text instead of a scope variable

jackdaw Over a year ago

With = I just receive the actual code representation of the object?

ryeballar Over a year ago

sorry for the late reply, I lost my internet connection earlier, I have updated my answer. But I guess it has already been answered, so I modified this answer as well.

Joao Leal · Accepted Answer · 2014-09-12 11:38:09Z

1

The @ symbol on scope transforms whatever you pass to the attribute games into text, and passes it into your directive. If you use the = symbol, you can pass a scope variable into the directive.

With @, scope.games will be a string

With =, scope.games will be your json object

var gameOdds = function(){
    return {
        template: '{{games["@homeTeam"]}} vs {{games["@awayTeam"]}}',
        scope: {
            games: '='
        }
    };
};

<div game-odds games="games">

answered Sep 12, 2014 at 11:38

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

1 Comment

jackdaw Over a year ago

This is correct, I had games="{{games}}" rather than games="games", which meant it was just dumping the object.

Collectives™ on Stack Overflow

AngularJS How do I access JSON from a directive

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related