प्रदर्शित लाने एपीआई प्रतिक्रिया ब्राउज़र विंडो में

0

सवाल

मैं कर रहा हूँ का उपयोग कर लायें एपीआई क्वेरी करने के लिए कुछ वेब सेवाओं के बाद से, मैं की जरूरत करने के लिए मैन्युअल रूप से जोड़ें X-Custom हेडर है । सभी उदाहरण मैं ने पाया है के बारे में प्रदर्शित करने के परिणाम का उपयोग करें console.log में DevTools सांत्वना खिड़की.

मैं कोई जावास्क्रिप्ट का अनुभव है, लेकिन यह एक साधन था के लिए एक अंत है, तो मैं:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            console.log(data);
        });
    })

इस करता है प्रदर्शित करने के लिए कंसोल, लेकिन मैं करना चाहते हैं यह ब्राउज़र विंडो में के रूप में अगर मैं था बस नेविगेट करने के लिए <url> और जवाब प्रदर्शित किया गया था. करता है सक्षम जावास्क्रिप्ट की तरह कुछ:

fetch('<url>', {
        headers: myHeaders,
        method: 'GET',
        credentials: 'include'
    }).then(
        function(response) {
            response.json().then(function(data)) {
                this.browserWindow.display(data);
            });
        })

कैसे मैं यह प्रदर्शित ब्राउज़र विंडो में के रूप में अगर मैं था करने के लिए navigated यूआरएल के माध्यम से खोज बार?

अद्यतन

तो मैं सफल रहा है लोड हो रहा है कुछ परिणाम के रूप में, तो:

fetch('<url>', {
    headers: myHeaders,
    method: 'GET',
    credentials: 'include'
}).then(
    function(response) {
        response.text().then(function(data)) {
            document.querySelector('body').innerHTML = data
        });
    })

और प्रतिक्रिया के लिए प्रकट होता है निरीक्षण; यह एक JSON प्रतिक्रिया तो मैं उम्मीद कर रहा था response.Json() काम होगा, लेकिन यह बस को प्रदर्शित करता है [object Object]. अगर मैं कर सकते हैं figur eout करने के लिए कैसे "सुंदर प्रदर्शन" JSON, हम एक समाधान है ।

fetch fetch-api google-chrome javascript
2021-11-22 17:50:43
1

सबसे अच्छा जवाब

2

आप ज्यादातर यह समझ से बाहर है, लेकिन अगर आप का उपयोग कर सकते हैं JSON.stringify प्राप्त करने के लिए अच्छे स्वरूपण. के लिए ब्योरा, मैं लिपटे परिणाम में HTML <pre> टैग, लेकिन आप का उपयोग कर सकते हैं जो कुछ भी समझ में आता है के लिए अपने मामले का उपयोग करें.

fetch('<url>', {
headers: myHeaders,
method: 'GET',
credentials: 'include'
}).then(
    function(response) {
        response.json().then(function(data)) {
            document.querySelector('body').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`
        });
    })

वहाँ है एक सुरक्षा चेतावनी के बारे में पता होना. आप जोड़ रहे हैं एक प्रतिक्रिया के लिए सीधे डोम के बिना sanitizing परिणाम है, जो नेतृत्व कर सकते हैं के लिए XSS हमलों (https://cheatsheetseries.owasp.org/cheatsheets/DOM_based_XSS_Prevention_Cheat_Sheet.html) जबकि इस कोड की चपेट में है, यह शायद एक मामूली खतरा दिया, अपने usecase.

कोड के लिए उपयोग के उत्पादन में, वहाँ रहे हैं दृष्टिकोण के एक नंबर को रोकने के लिए इस जोखिम, सबसे आम किया जा रहा से बचने के लिए किसी भी स्ट्रिंग आप जा रहे हैं सम्मिलित करने के लिए, में DOM. एक विकल्प है पार्स परिणाम है, और बनाने के HTML तत्वों को आप चाहते हैं सम्मिलित करने के लिए, और का उपयोग कर innerTEXT के लिए सामग्री प्रदान की एपीआई से.

2021-11-23 17:10:39

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में