কীভাবে কোনও JSON উপস্থাপনা প্রদর্শন করবেন এবং স্ক্রিনে [অবজেক্ট অবজেক্ট] নয়

Question

আমি বিটা সংস্করণ দিয়ে একটি AngularJS 2 অ্যাপ্লিকেশন তৈরি করছি। আমি আমার পৃষ্ঠায় কোনও জিনিসের একটি জেএসএন প্রতিনিধিত্ব দেখাতে চাই, তবে এটি প্রদর্শিত হবে [Object Object]এবং তা নয় {key1:value1 ....}

আমি যে উপাদানটি ব্যবহার করতে পারি তা থেকে:

get example() {return JSON.stringify(this.myObject)};

এবং তারপরে টেমপ্লেটে:

{{example}}

তবে যদি আমার কাছে অবজেক্টগুলির একটি অ্যারে থাকে এবং আমি এই জিনিসগুলির একটি তালিকা মুদ্রণ করতে চাই তবে আমি কীভাবে এটি করতে পারি?

ব্যবহার:

<ul>
   <li *ngFor="#obj of myArray">{{obj}}</li>
</ul>

এরকম কিছুতে ফলাফল:

- [অবজেক্ট অবজেক্ট]
- [অবজেক্ট অবজেক্ট]
- [অবজেক্ট অবজেক্ট]
- [অবজেক্ট অবজেক্ট]

ইত্যাদি। এগুলি JSON হিসাবে প্রদর্শন করার কোনও উপায় আছে কি?

Answer 1

আপনি যদি নিজের ওয়েব অ্যাপ্লিকেশনটিতে কোনও বস্তুর ভিতরে কী কী দেখতে চান তবে কোনও উপাদান এইচটিএমএল টেমপ্লেটে জেসন পাইপ ব্যবহার করুন , উদাহরণস্বরূপ:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

পরীক্ষিত এবং কৌনিক 4.3.2 ব্যবহার করে বৈধ।

Comments

আপনাকে ধন্যবাদ,

— জেসন পাইলটি

@ ফোরালোবো জসন পাইপ অ্যাঙ্গুলার 1 তেও উপলভ্য ছিল;)

— ইলকার ক্যাট

অসাধারণ! ধন্যবাদ.

— moreirapontocom

Answer 2

আমরা কৌনিক পাইপ জেসন ব্যবহার করতে পারি

{{ jsonObject | json }}

Answer 3

JSON অবজেক্টটি লুপ করার জন্য: অ্যাংলুয়ারের (6.0.0+) এ, এখন তারা পাইপটি সরবরাহ করে keyvalue:

<div *ngFor="let item of object| keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

এছাড়াও পড়ুন

শুধু JSON প্রদর্শন করতে

{{ object | json }}

Comments

Fav উত্তর কারণ এটি উভয় আছে, এবং আপনার সম্ভবত দুটোই দরকার: সাধারণ ভেরিয়েবলের জন্য "just json"। তবে এমন একটি ফর্ম নিয়ন্ত্রণের মতো যেটির জন্য বিজ্ঞপ্তি সংক্রান্ত রেফারেন্স রয়েছে, আপনার প্রথম বিকল্প হিসাবে উপস্থাপিত লুপের প্রয়োজন হবে। উভয়ই এখনও Angular9 এ সঠিক বাক্য গঠন।

— Anders8

Answer 4

JSON হিসাবে অবজেক্ট সামগ্রী ডাম্পিং ব্যবহার না করেই অর্জন করা যায় ngFor। উদাহরণ:

উদ্দেশ্য

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

মার্কআপ

<div [innerHTML]="theObject | json"></div>

আউটপুট (আরও ভাল পঠনযোগ্যতার জন্য বিউটিফায়ারের মধ্য দিয়ে চলেছে, অন্যথায় এটি একক সারিতে আউটপুট)

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

---

আমি এমন একটি JSON ফর্ম্যাটর এবং ভিউয়ারটিও সন্ধান করেছি যা বড় JSON ডেটা আরও পঠনযোগ্য (JSONView ক্রোম এক্সটেনশনের অনুরূপ) প্রদর্শন করে: https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

Comments

এছাড়াও, আপনি যদি ডিভ থেকে প্রাক ট্যাগে পরিবর্তন করেন তবে এটিকে স্বয়ংক্রিয়ভাবে সঠিকভাবে গঠন করা হবে।

— Oddleif

@ অডলিফ - হ্যাঁ আমি খুব দরকারী দর্শকের জন্য একটি উল্লেখও যুক্ত করেছি যাতে তথ্যটি আরও স্বাচ্ছন্দ্যে প্রদর্শন করা উচিত।

— আলেক্সি

Answer 5

2 টি উপায় রয়েছে যার মাধ্যমে আপনি মানগুলি পেতে পারেন: -

1. বিন্দু স্বরলিপি (Ob.property) ব্যবহার করে অবজেক্টের সম্পত্তি অ্যাক্সেস করুন।
2. উদাহরণ মান হিসাবে "[সম্পত্তি"] মূল মান পাস করে অবজেক্টের সম্পত্তি অ্যাক্সেস করুন

Answer 6

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Comments

ইতিমধ্যে একই উত্তর দেওয়া হয়েছে, এবং আপনার * এনজিফোর্ড লুপে আপত্তি করার আগে একটি লেট কীওয়ার্ড অবশ্যই ব্যবহার করা উচিত।

— অ্যালেক্সিস টবি

Answer 7

নতুন বাক্য গঠন সহ অন্যের উত্তর আপডেট করা:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Answer 8

যদি আপনার কাছে অবজেক্টের অ্যারে থাকে এবং আপনি তাদের মিশ্রণে ডিজিটালাইজ করতে চান

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

তারপর টেমপ্লেটে

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>

Answer 9

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });

Comments

আরে, আপনি যা লিখেছেন তার উন্নতি করার জন্য, আপনি ধারণার সাথে খুব পরিচিত নন এমন কোনও পাঠক আপনার সিদ্ধান্তগুলি বুঝতে পারে তা নিশ্চিত করার জন্য আপনি নিজের উত্তরে কিছু ব্যাখ্যা যোগ করতে পারেন।

— অ্যাপ্লুসকিনাস