AngularJS biçimi JSON dizesi çıktısı

92

Girdiden veri toplayan, bir modeli kullanarak bir dizgeye dönüştüren JSON.stringify()ve bir kullanıcının bu modeli, <textarea>öğe güncellendiğinde girdi alanlarının güncellenmesini sağlayacak şekilde düzenlemesine izin veren bir AngularJS uygulamam var . Bir tür iki yönlü bağlama :)

Sorun şu ki, String'in kendisi çirkin görünüyor ve onu şöyle görünecek şekilde biçimlendirmek istiyorum:

görüntü açıklamasını buraya girin

Ve şimdi göründüğü gibi değil:

görüntü açıklamasını buraya girin

Bunun nasıl başarılabileceğine dair bir fikriniz var mı? Ek bilgiye ihtiyacınız varsa - sormaktan çekinmeyin. Her cevap çok takdir edilir ve hemen cevaplanır.

Teşekkür ederim.

Not: Sanırım bu bir tür yönerge veya özel bir filtre olmalı. Verinin kendisi DEĞİŞTİRİLMEMELİ, yalnızca çıktı DEĞİŞTİRİLMELİDİR.

— amenoir
kaynak

1

Bunu deneyebilir misiniz - Metin alanında, enter tuşuna basın ve ortaya çıkan dizeyi istediğiniz gibi biçimlendirin. Ardından $watch, metin alanı modeli üzerinde (önceki sorunun cevabına göre), bir yapabilir console.log()ve enter tuşu için dizede hangi değeri aldığınızı görebilir misiniz - sanırım bu "/ n"

— callmekatootie

1

Buna dayanarak, metni nasıl biçimlendirebileceğinizi önerebilirim

— callmekatootie

{"anchorPosition": "1", "zorluk": "1", "includeInSequence": "1", "questionCount": "1"}

— 2014

String biçimlendirildikten sonra temelde hiçbir şey değişmedi.

— amenoire

Aşağıdaki cevaplara bakın - yardımcı oluyorlar mı?

— callmekatootie

66

İsteğe bağlı bir parametre kullanabilirsiniz JSON.stringify()

JSON.stringify(value[, replacer [, space]])

Parametreler

değer JSON dizesine dönüştürülecek değer.

değiştirici Eğer bir işlev ise, dizgeleme sırasında karşılaşılan değerleri ve özellikleri dönüştürür; bir dizi ise, son dizedeki nesnelere dahil edilen özellikler kümesini belirtir. Yerine koyma işlevinin ayrıntılı bir açıklaması, Yerel JSON kullanımı javaScript kılavuz makalesinde verilmiştir.

boşluk Ortaya çıkan dizenin güzel yazdırılmasına neden olur.

Örneğin:

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

size aşağıdaki sonucu verecektir:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

— Lukasz Wiktor
kaynak

5

bunun $$hashKeydahili model izleme için mülkün açısal kullanımlarını koruduğunu unutmayın

— PixnBits

1

Ayrıca JSON.stringify(object, null, 2)2'nin beyaz boşluk karakter sayısı olduğu yerde de yapabilirsiniz .

— MrE

@ Lukasz, $$ Hashkey'den kaçınabilir miyim?

— Md Aslam

434

Eğik bir yerleşik filtergöstermek içinJSON

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

preBeyaz boşlukları ve satır sonlarını korumak için -tag'ın kullanımına dikkat edin

Demo:

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <pre>{{data | json}}</pre>
  </body>

</html>

Snippet'i genişlet

Ayrıca bir angular.toJsonyöntem var, ancak bununla oynamadım ( Docs )

— Ivarni
kaynak

1

Evet, bunu zaten biliyorum. Ancak bu filtreyi yapamıyorum çünkü metin alanının kendisi bir model.

— amenoire

Bu çok basit ama çok kullanışlı: D

— Jamie Street

2

@ ra170 Sadece başlığı değil, tüm soruyu dikkatlice okuyun. Basit bir json filtresinden biraz farklı bir şey istiyordum.

— amenoire

Senin o Not <pre>etiketi olmamalıdır white-spaceiçin özellik seti normalveya no-wrap. Aksi takdirde, JSON'nuz istediğiniz gibi girintilenmeyecektir.

— falconepl

3

Sorun yaşıyordum ama <pre> olmadan yapıyordum .... Bu yanıtı gördüm ve düzelttim .... teşekkürler !!

— Lucas

23

JSON'u HTML olarak oluşturmak istiyorsanız ve daraltılabiliyorsa / açılabiliyorsa, benim yaptığım bu yönergeyi güzel bir şekilde oluşturmak için kullanabilirsiniz:

https://github.com/mohsen1/json-formatter/

görüntü açıklamasını buraya girin

— Mohsen
kaynak

11

Daha önce bahsedilen açısal jsonfiltreye ek olarak , açısal toJson()işlev de vardır .

angular.toJson(obj, pretty);

Bu işlevin ikinci parametresi, güzel yazdırmayı açmanıza ve kullanılacak boşluk sayısını ayarlamanıza olanak tanır.

True olarak ayarlanırsa, JSON çıktısı yeni satırlar ve boşluklar içerecektir. Bir tamsayıya ayarlanırsa, JSON çıktısı girinti başına bu kadar çok boşluk içerecektir.

(varsayılan: 2)

— Daniel Haley
kaynak

ona 1000

— nesnelik

Youvariable = angular.toJson ...., yazdığınız gibi, sonuç güzel gibi görünüyor

— Márcio Rossato

6

Sanırım json metnini düzenlemek için kullanmak istiyorsunuz. O zaman ivarni'nin yolunu kullanabilirsiniz:

{{veriler | json}}

ve yapmak için bir reklam özelliği ekleyin

 düzenlenebilir

<pre contenteditable="true">{{data | json}}</pre>

Umarım bu size yardımcı olabilir.

— Joy Ge
kaynak

2

JSON'u biçimlendirmek ve ayrıca bazı sözdizimi vurgulamaları yapmak istiyorsanız, ng-prettyjsonyönergeyi kullanabilirsiniz . Npm paketine bakın.

İşte nasıl kullanılacağı: <pre pretty-json="jsonObject"></pre>

— Nayan
kaynak