想詢問串接api fetch回傳的部分

#新手求指導

bmpss92295 2022-04-07 19:25:14 ‧ 777 瀏覽

分享至

不好意思問題比較菜!
在網路上試著做api串接時他們示範都是使用console.log去輸出在console那邊
輸出的結果沒問題

但我改成輸出在網頁上時會顯示出[object Object
請問如果想將api回傳的結果顯示在html上要如何使用
這是html的程式碼

這是js的

這是顯示的網頁按下submit之後會出現這個要如何取的物件內的文字並顯示出來

另外在console正常輸出的地方會長這樣

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2022-04-07 20:30:01

最佳解答

簡答

document.getElementById('resultText').innerHTML = JSON.stringify(quote);

參考

JSON.stringify

補充

因為 innerHTML 必須被設定為一個字串，而 quote 本身不是字串
遇到這種情形，程式會看看有沒有預設的轉換為字串的方法（toString）
因為 quote 的資料型態是 Object，所以預設就會變成 [object Object] 這樣的字串了

toString 有一些應用，例如下面這例子

var myName={
    firstName: 'aaa',
    lastName: 'bbb',
    toString: function() {
        return this.firstName + ' ' + this.lastName
    }
};

console.log('my full name is ' + myName);

回應 2
分享
檢舉

bmpss92295 iT邦新手 5 級 ‧ 2022-04-07 20:52:52 檢舉

了解了謝謝你!
另外想請問我能夠更改傳送過來的api內容嗎
現在可以顯示出來了但想做到換行等等

淺水員 iT邦大師 6 級 ‧ 2022-04-07 21:16:58 檢舉

JSON.stringify 輸出就是一個字串
他有其他參數，讓輸出的排版比較好看

但還要注意換行字元在 span 裡面會當作空白處理
所以還要透過以下其中一個方式處理（擇一）

把 \n 取代成 <br>
把 span 改成 pre
修改 span 的 css 讓他遇到 \n 會換行

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙