AngularJS: how to preprocess json data

Question

I have created a factory to retrieve json data from my backend. Parts of the json data is heavily text-based and needs to convert line breaks into coupled <p></p> tags.

I tried to use this function to process the text in my view file.

function TextProcess(text) {
    var p_text = text.replace("/[\r\n]+/", "</p><p>")+"</p>";
    var finish_text = p_text.replace("/(?<=\s)\x20|\x20(?=\s)/", "&nbsp;");
    return(finish_text);
}

It is possible that this function has its own problem...(I'm very new to javascript)

Then in view, I tried:

<p>{{TextProcess(article.body)}}</p>

This line gets me nowhere.

Is what I am doing the right way to process text in AngularJS? I have no idea how to process Json data using AngularJS without the help of ng-repeat.

Please tell me what to do.

Jason · Accepted Answer · 2013-07-30 02:42:02Z

1

You can do this is using a custom filter to apply formatting to the text.

You will end up writing this in your template:

<span ng-bind-html-unsafe="text | customFilter"></span>

Here is the custom filter code (i named it 'fixup')

.filter('fixup', function () {

return function (input) {
    var txt = input.replace("/[\r\n]+/", "</p><p>") + "</p>";
    var out = txt.replace("/(?<=\s)\x20|\x20(?=\s)/", "&nbsp;");

  return out;
}

I created a fiddle, but the substitution isn't working so well, but it should give a solid starting point: http://jsfiddle.net/aNp8M/2/

answered Jul 30, 2013 at 2:42

Jason

15.9k3 gold badges51 silver badges73 bronze badges

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

2 Comments

windweller Over a year ago

Thanks!!!! It worked. I changed my RegExp of course..this is how I wrote on my template. I'm not sure if this is the right way to do: <p ng-bind-html-unsafe="article.body | textProcess">{{article.body}}</p>

Jason Over a year ago

glad to help. please mark the question as the answer and/or vote it up.

Collectives™ on Stack Overflow

AngularJS: how to preprocess json data

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