स्क्रीन पर एक JSON प्रतिनिधित्व और [ऑब्जेक्ट ऑब्जेक्ट] कैसे प्रदर्शित करें

Question

मैं बीटा संस्करण के साथ एक AngularJS 2 एप्लिकेशन बना रहा हूं। मैं अपने पृष्ठ में किसी ऑब्जेक्ट का JSON प्रतिनिधित्व दिखाना चाहता हूं, लेकिन यह दिखाता है कि [Object Object]नहीं {key1:value1 ....}

मैं उपयोग कर सकते हैं घटक से:

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

और फिर टेम्पलेट में:

{{example}}

लेकिन अगर मेरे पास वस्तुओं की एक सरणी है और मैं इन वस्तुओं की सूची मुद्रित करना चाहूंगा, तो मैं यह कैसे कर सकता हूं?

का उपयोग करते हुए:

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

कुछ इस तरह से परिणाम:

- [वस्तु वस्तु]
- [वस्तु वस्तु]
- [वस्तु वस्तु]
- [वस्तु वस्तु]

और इसी तरह। क्या JSON के रूप में प्रदर्शित करने का कोई तरीका है?

Answer 1

यदि आप देखना चाहते हैं कि आपके वेब ऐप में किसी वस्तु के अंदर क्या है, तो एक घटक HTML टेम्पलेट में json पाइप का उपयोग करें , उदाहरण के लिए:

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

कोणीय 4.3.2 का उपयोग करके परीक्षण किया गया और वैध है।

Comments

शुक्रिया,

— जोंस

@foralobo Json पाइप Angular 1 में भी उपलब्ध थी;)

— Ilker Cat

बहुत बढ़िया! धन्यवाद।

— 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 उत्तर क्योंकि यह दोनों है, और आप दोनों की आवश्यकता होगी: सरल चर के लिए "बस json"। लेकिन किसी भी प्रकार के नियंत्रण के लिए, जिसमें परिपत्र संदर्भ होते हैं, आपको पहले विकल्प के रूप में प्रस्तुत लूप की आवश्यकता होगी। दोनों अभी भी Angular9 में सही वाक्यविन्यास हैं।

— एंडर्स

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 Chrome एक्सटेंशन के समान) प्रदर्शित करता है: https://www.npmjs.com/package/ngx-json-viewer

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

Comments

इसके अलावा, अगर आप div से प्री टैग में बदलते हैं तो आप इसे अपने आप ठीक से तैयार कर लेते हैं।

— ओडलीफ़

@ ओडलीफ़ - हाँ। मैंने एक बहुत उपयोगी दर्शक के संदर्भ को भी जोड़ा है जो सूचना को अधिक आसानी से प्रदर्शित करना चाहिए।

— अलेक्सई

Answer 5

ऐसे 2 तरीके हैं जिनसे आप मान प्राप्त कर सकते हैं: -

1. डॉट नोटेशन (obj.property) का उपयोग करके ऑब्जेक्ट की संपत्ति तक पहुंचें।
2. उदाहरण के लिए मुख्य मूल्य में पास करके वस्तु की संपत्ति तक पहुँचें obj ["संपत्ति"]

Answer 6

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

Comments

वही पहले से ही उत्तर दिया गया है, और आपको * ngFor लूप में obj से पहले लेट कीवर्ड का उपयोग करना चाहिए।

— एलेक्सिस टोबी

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

अरे, आपने जो लिखा है उस पर सुधार करने के लिए, आप अपने उत्तर में कुछ स्पष्टीकरण जोड़ सकते हैं ताकि यह सुनिश्चित हो सके कि एक पाठक जो अवधारणाओं से बहुत परिचित नहीं है वह आपके निर्णयों को समझ सकता है।

— aplusKminus