CODEWITHSUNDEEP
htmlcssangularjs
Simos Fasouliotis
Simos Fasouliotis

Reputation: 1390

Styling a big JSON string to show in multiple lines instead of 1 big line

I want to show all the bindings at the bottom of my page of the AngularJS application. So at the end of the page (inside the body) i've put a {{vm}} which shows very correctly all the strings.

EG. {"section":"b","b1anow":"","b1bnow":"","b1cnow":"","b1dnow":"","b1nowpoints":100,"b1ashould":"","b1bshould":"","b1cshou" }

But when the string becomes very big the lines do not break and it continues to 1 very very big line, going out of bounds (goes out of the HTML element keeping 1 row instead of wraping inside the parent element).

I've tried <pre>{{vm}}</pre> but it still have same output. I believe it does that because there is no space character, but i'm not sure.

How can i put {{vm}} so it breaks to multiple lines and wraps in the parent html element ?

I'm not looking for a pretify javascript or whatever. This is not what I ask. ALso word-wrap:break-word; does not work, i added but nothing happened.

I've tried <div style="word-break: break-all;"> {{vm}} </div>

but doesnt work, still 1 line.

Upvotes: 0

Views: 1192

Answers (1)

LICD
LICD

Reputation: 66

vm.replace(/([{},:])/g, ' $1 ')

For example:

'{"k1":"v1","k2":"v2"}'.replace(/([{},:])/g, ' $1 ')

would return 

 { "k1" : "v1" , "k2" : "v2" }

and with those extra-spaces your JSON can wrap without problems.

Upvotes: 2

Related Questions