AngularJS how to style JSON message

Question

I am trying to style the JSON message to the required style.

the required style of JSON message looks like:

[   
{
“question”: “Write down Nhat’s email”,
    “answer”: “[email protected]”,
    “inline”: true
},
{
<% NEXT QUESTION/ANSWER %>
},
{
<%…%>
}
]

and currently my JSON message looks like:

[{"Question":"Question","Note":"","notePlaceholder":"enter text","inlineChecked":false},{"Question":"Question","Note":"","notePlaceholder":"enter text...","inlineChecked":""}]

Any idea on that?

This is the link of my code

Are you trying to add line breaks into a JSON display in a UI? — JeffryHouser
– JeffryHouser, Commented Feb 28, 2014 at 19:33

moribvndvs · Accepted Answer · 2014-02-28 20:04:07Z

1

You could use the json filter on the object in a pre tag.

 <pre>{{json | json}}</pre>

Plunk

Regarding your question, you could add a $watchCollection on json, and in the handler iterate through the items and delete the property you don't want.

   $scope.$watchCollection('json', function(values) {
      angular.forEach(values, function(item) {
        delete item.notePlaceholder;
      });
    });

Note, you're simply passing a reference from $scope.items to $scope.json, so if you modify one it will modify the other. If you don't want that, use angular.copy to make a separate copy. I've also update the plunk.

edited Feb 28, 2014 at 20:04

answered Feb 28, 2014 at 19:44

moribvndvs

42.5k12 gold badges138 silver badges152 bronze badges

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

2 Comments

Justin Over a year ago

btw, how should i remove one item, like "notePlacehoder" in the json message?

moribvndvs Over a year ago

you could add a watch on that item, so when it changes you could call delete $scope.json.notePlaceholder; or something like that

Collectives™ on Stack Overflow

AngularJS how to style JSON message

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