Output string JSON format AngularJS

92

Saya memiliki aplikasi AngularJS, yang mengumpulkan data dari input, mengubah model menjadi string menggunakan JSON.stringify()dan memungkinkan pengguna mengedit model ini sedemikian rupa sehingga kolom input diperbarui jika <textarea>elemen diperbarui dan sebaliknya. Semacam pengikatan dua arah :)

Masalahnya adalah bahwa String itu sendiri terlihat jelek dan saya ingin memformatnya sehingga terlihat seperti ini:

masukkan deskripsi gambar di sini

Dan tidak seperti yang terlihat sekarang:

masukkan deskripsi gambar di sini

Ada ide bagaimana ini bisa dilakukan? Jika Anda memerlukan info tambahan - jangan ragu bertanya. Setiap jawaban sangat dihargai dan segera dijawab.

Terima kasih.

PS Saya kira ini harus menjadi semacam arahan atau filter khusus. Data itu sendiri TIDAK HARUS diubah, hanya keluarannya.

javascript json string angularjs formatting amenoire
sumber
1
Bisakah Anda mencoba ini - Di textarea, tekan enter dan format string yang dihasilkan sesuai keinginan. Kemudian di $watch(berdasarkan jawaban atas pertanyaan sebelumnya) di atas model textarea, dapatkah Anda melakukan a console.log()dan melihat nilai apa yang Anda dapatkan dalam string untuk tombol enter - saya pikir itu "/ n"
callmekatootie
1
Berdasarkan ini, saya dapat menyarankan bagaimana Anda dapat memformat teks
callmekatootie
{"anchorPosition": "1", "kesulitan": "1", "includeInSequence": "1", "questionCount": "1"}
amenoire
Pada dasarnya tidak ada yang berubah setelah String diformat.
amenoire
Lihat jawaban di bawah - apakah itu membantu?
callmekatootie

Jawaban:

65

Anda dapat menggunakan parameter opsional JSON.stringify()

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

Parameter

  • nilai Nilai yang akan diubah menjadi string JSON.
  • replacer Jika suatu fungsi, mengubah nilai dan properti yang ditemui saat merangkai; if sebuah array, menentukan set properti yang termasuk dalam objek di string terakhir. Penjelasan mendetail tentang fungsi pengganti tersedia di artikel panduan javaScript Menggunakan JSON asli.
  • spasi Menyebabkan string yang dihasilkan akan dicetak dengan cantik.

Sebagai contoh:

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

akan memberi Anda hasil sebagai berikut:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"
Lukasz Wiktor
sumber
5
perhatikan bahwa ini mempertahankan penggunaan $$hashKeysudut properti untuk pelacakan model internal
PixnBits
1
Anda juga dapat melakukan di JSON.stringify(object, null, 2)mana 2 adalah jumlah karakter spasi.
MrE
@ Lukasz, Dapatkah saya menghindari $$ Hashkey?
Md Aslam
433

Angular memiliki built-in filteruntuk ditampilkanJSON

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

Perhatikan penggunaan pre-tag untuk menghemat whitespace dan linebreak

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="[email protected]" 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>
Luaskan cuplikan

Ada juga angular.toJsonmetode, tapi saya belum bermain-main dengan itu ( Docs )

ivarni
sumber
1
Ya, saya sudah tahu ini. Tapi saya tidak bisa membuat filter ini karena textarea itu sendiri adalah model.
amenoire
Ini sangat sederhana, namun sangat berguna: D
Jamie Street
2
@ ra170 Berbaik hati membaca seluruh pertanyaan dengan cermat, bukan hanya judulnya. Saya meminta hal yang sedikit berbeda dari filter json sederhana.
amenoire
Perhatikan bahwa properti <pre>tag Anda tidak boleh white-spacedisetel ke normalatau no-wrap. Jika tidak, JSON Anda tidak akan terindentasi seperti yang Anda inginkan.
falconepl
3
Saya mengalami masalah tetapi saya melakukannya tanpa <pre> .... Saya melihat jawaban ini dan saya memperbaikinya .... terima kasih !!
Lucas
11

Selain filter sudut yangjson sudah disebutkan, ada juga fungsi suduttoJson() .

angular.toJson(obj, pretty);

Parameter kedua dari fungsi ini memungkinkan Anda mengaktifkan pencetakan cantik dan mengatur jumlah spasi yang akan digunakan.

Jika disetel ke true, keluaran JSON akan berisi baris dan spasi baru. Jika disetel ke bilangan bulat, keluaran JSON akan berisi banyak spasi per indentasi.

(bawaan: 2)

Daniel Haley
sumber
halaman saya diblokir ketika saya memberinya array 1000 objek
Asqan
Youvariable = angular.toJson ...., seperti yang Anda tulis, sepertinya hasilnya cantik
Márcio Rossato
6

Saya kira Anda ingin menggunakan untuk mengedit teks json. Maka Anda bisa menggunakan cara ivarni: 

{{data | json}}
dan tambahkan atribut adition untuk membuatnya 
 dapat diedit


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

Semoga ini bisa membantu Anda.

Joy Ge
sumber
2

Jika Anda ingin memformat JSON dan juga melakukan beberapa penyorotan sintaks, Anda dapat menggunakan ng-prettyjsondirektif. Lihat paket npm.

Berikut cara menggunakannya: <pre pretty-json="jsonObject"></pre>

Nayan
sumber