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.

— 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

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="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>

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

23

Jika Anda ingin merender JSON sebagai HTML dan dapat diciutkan / dibuka, Anda dapat menggunakan arahan yang baru saja saya buat untuk merendernya dengan baik:

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

masukkan deskripsi gambar di sini

— Mohsen
sumber

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