current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite

I have been trying to teach myself both JavaScript and AngularJS, so please forgive any foolish mistakes, wrong terminology or the fact that I may be approaching this totally the wrong way. I also apologise if a solution has been posted before, but after searching relentlessly I cannot find anything.

I am putting together a storybook as a single page app using AngularJS. The first few divs, which animate in and out, via an index calculation contain a few lines of static html but then the reader can choose one of four paths that the story will take by clicking one of four buttons.

To accomplish this I have set-up four JSON files, that will dynamically load depending on a button click. For example, if the reader clicks the chocolate ice cream button, the chocolate.json file loads and rest of the story will be about chocolate ice cream. If the reader clicks the strawberry ice cream button the strawberry.json file loads and the rest of the story is about strawberry ice cream etc. (I am simplifying the content concept here!)

This works really well. To me, at least, it seems sensible to store the content in JSON format.

However, there are a couple of variables that I would like to include throughout the story to make it more personal to the reader. For example, perhaps their first name that can be recalled throughout the narrative.

This is where I am hitting a problem. All of my AngularJS expressions are binding perfectly in the html file where the content is non-JSON. But of course, since most of my content is from external JSON files, can I place expressions within these?

For example,

In my html AngularJS text binding expressions such as (simplified):

<p>{{readerName}}</p>

<p>{{myContent.intro}}</p>

Work perfectly. Pulling in the expected values, or data from one of the JSON files.

But what if I want to include values in the external JSON file itself, and then pull that in? The example below, understandably, just results in a text string, the expressions do not evaluate. So, literally {{readerName}}, rather than the John Smith value I was hoping for. How do I get the expressions to show values?

[
{
    "textline"  : "Hey {{readerName}}, what's your favourite ice cream flavour",
    "answers"   : [
        { "id" : 0, "text" : "Chocolate" },
        { "id" : 1, "text" : "Chocolate chip" },
        { "id" : 2, "text" : "Double Chocolate" },
        { "id" : 3, "text" : "Dark Chocolate" }
    ],
    "feedback" : "That's a lot of chocolate {{readerName}}..."
},
{
    "textline" : "Hey {{readerName}}, what's your second favourite ice cream flavour",
    "answers"  : [
        {"id"  : 0, "text" : "Milk Chocolate" },
        {"id"  : 1, "text" : "Belgian Chocolate" },
        {"id"  : 2, "text" : "Death by Chocolate" },
        {"id"  : 3, "text" : "Rich Chocolate" }
    ],
    "feedback" : "That's even more chocolate {{readerName}}!"
}
]

Thanks in advance for any answers. I have a suspicion I am approaching this the wrong way...

share|improve this question
    
I'm not entirely sure I grasp what what you are doing but I think I know where you want to be. In order for the data to be accessible from the view it'll need to be set to a $scope var. So.. you'll need to set your $scope.*var* equal to the json from your file, then reference the var in markup {{var}} – jKlaus Nov 17 '15 at 16:09
    
Thanks for your help jKlaus, much appreciated. I believe that this is already the case but I will be working further on this project this morning and will double check that the data I need is on the scope. Certainly, {{readerName}} can be successfully populated elsewhere throughout the project. – sixfour Nov 18 '15 at 9:11
up vote 1 down vote

Angular will not interpolate inner content of the strings it renders. You could however define custom filter that would do the job for you, however the syntax is going to be a little weird:

angular.module('demo', []).controller('DemoCtrl', function($scope) {
  $scope.readerName = 'John Smith';
  $scope.myContent = {intro: "Hey {{readerName}}, what's your favourite ice cream flavour"};
})

.filter('interpolate', function($interpolate) {
  return function(value, scope) {
    return $interpolate(value)(scope);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>

<div ng-app="demo" ng-controller="DemoCtrl">
  <p>{{readerName}}</p>
  <p>{{myContent.intro | interpolate:this}}</p>
</div>

The part interpolate:this means: use filter "interpolate" and pass current scope (this) in it as a parameter to interpolate string in its context.

share|improve this answer
    
Thanks dfsq. I will definitely look into "interpolate". If this correctly renders the expressions within the JSON source then it could be just what I am looking for. – sixfour Nov 18 '15 at 9:13
    
I didn't even think about that part.. in our case we were using WebParts (old legacy SP2010 stuff). At any rate we merely added a literal control to the markup that had well formed json vars wrapped in script tags. Hacky as all get out but its what was done. – jKlaus Nov 18 '15 at 15:17

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.