Angular [$interpolate:interr] error for applied filter

Question

Hi I have a filter which replaces \n to \n\n when i use this filter for my json data I get error saying Can't interpolate: {{ post.description|nlToArray }} TypeError: Cannot read property 'replace' of undefined

My filter

sampleApp.filter('nlToArray', function() {
  return function(text) {
      return text.replace(/\n/g, '/\n\n');
  };
});

displaying data obtained from json api

hmtl

<p class="blog-post-title">{{ post.title }}</p>
<p class="blog-post-meta"><i class="fa fa-clock-o">&nbsp {{ post.pub_date|date  }}</i> </p>
<span style="white-space: pre-line">{{ post.description|nlToArray }}</span>
<br />

My json data

[{"id":1,"title":"Israel’s desert city of Beersheba is turning into a cybertech oasis","description":"morphing into a tech oasis.\r\nThe military’s massive relocation of its prestigious technology units.\r\nBeersheba has all of the ingredients of a vibrant security technology ecosystem, \r\n“All in all, projections are that 20,000-30,000 \r\nThe commercial sector has teamed up  cyber attacks.","pub_date":"2016-03-20T10:48:19.394643Z"},{"id":2,"title":"These are testing times: mavericks vs. ice people","description":"One of my earliest engineering jobs, before I fled hardware in favor of the (relative). \r\nThe practice of engineering soon teaches one that, .\r\nSo what do we do? We practice defense in depth. We follow the robustness principle. We “always code as \r\n…Yeah, well, that’s the idea. For my day job at HappyFunCorp I do a lot of interviews, and almost every junior develope.\r\nI don’t necessarily blame them. You can make  go.","pub_date":"2016-03-20T10:50:07.965930Z"}]

To be much clearer, description in json is like this

morphing into a tech oasis.\r\nThe military’s massive relocation of its prestigious technology units.\r\nBeersheba has all of the ingredients of a vibrant security technology ecosystem, \r\n“All in all, projections are that 20,000-30,000 \r\nThe commercial sector has teamed up  cyber attacks.

What could be the possible solution...Thanks in advance

What do you see if you remove the filter? Ie, just try and display post.description as-is — Phil
– Phil, Commented Mar 22, 2016 at 4:51
Ya but Im inserting 2 new line characters..........this is done by filter......If i remove filter it works fine — Coeus
– Coeus, Commented Mar 22, 2016 at 4:53
That's strange. You sure you don't have a typo in the function arguments, ie it definitely has return function(text) { ... and not return function(txt) or anything else? — Phil
– Phil, Commented Mar 22, 2016 at 4:56
Thanks Phil........Harpreet solution worked.......Thanks for your time to help me..........cheers — Coeus
– Coeus, Commented Mar 22, 2016 at 4:59

Harpreet · Accepted Answer · 2016-03-22 04:54:39Z

1

Make the code null safe by replacing

sampleApp.filter('nlToArray', function() {
  return function(text) {
      return text.replace(/\n/g, '/\n\n');
  };
});

with

sampleApp.filter('nlToArray', function() {
  return function(text) {
      if (text) 
        return text.replace(/\n/g, '/\n\n');
      else
        return text;
  };
});

answered Mar 22, 2016 at 4:54

Harpreet

1,60715 silver badges27 bronze badges

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

2 Comments

Phil Over a year ago

@Coeus I'm not at all sure why this worked. At a guess, I'd say at least one of your data entries does not have a description property

Harpreet Over a year ago

@Phil: Coeus answered it, also it was mentioned in error logs in original post :)

Collectives™ on Stack Overflow

Angular [$interpolate:interr] error for applied filter

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related