iT邦幫忙

2

關於json物件

自己練習API串接opendata 的資料
我想在介紹中src屬姓前面加上網域名稱
但不知如何抓取json物件中src裡的網址,導致圖片顯示不出來

{
"景點ID": "1444",
"狀態": "開啟",
"名稱": "潭子落羽松祕境",
"簡述": "唯美松紅 擁抱浪漫情懷",
"介紹": "<img alt="潭子落羽松祕境" id="img-32612-1576732502303" src="/Utility/DisplayImage?id=32612&rnd=1576732502303" style="width: 748px;" />
}

以下是程式碼

https://ithelp.ithome.com.tw/upload/images/20200326/20120490XrMGN4iYit.png

謝謝!!!!

咖咖拉 iT邦研究生 5 級 ‧ 2020-03-26 14:38:02 檢舉
這..JS確定可以跑出來嗎?
你的問題應該不是JSON物件

黃色圈圈那邊感覺會很紅喔
ccc123 iT邦新手 5 級 ‧ 2020-03-26 14:47:34 檢舉
可以顯示出來 除了圖片以外.....orz
ch_lute iT邦新手 5 級 ‧ 2020-03-26 15:21:24 檢舉
找出Item[i]內 src=" 的索引,和這個索引後第1個 " 的索引,把中前的值取出來吧。
要更嚴謹就是先找 <img 甚至先確認 src=" 前是空格或 "

1 個回答

5
listennn08
iT邦高手 8 級 ‧ 2020-03-26 14:41:16
最佳解答

用正則

${items[i].介紹.match(/src=\"(.+)\"/)[1]}
看更多先前的回應...收起先前的回應...
ccc123 iT邦新手 5 級 ‧ 2020-03-26 14:48:00 檢舉

感謝!! 剛剛試過 成功顯示了

我剛剛看會抓到
/Utility/DisplayImage?id=32612&rnd=1576732502303" style="width: 748px;
如果不要 style 就再加

/src=\"(.+)\" style/
ch_lute iT邦新手 5 級 ‧ 2020-03-26 15:13:03 檢舉

剛剛試這樣某個後面如果沒有style就抓不到了

ccc123 iT邦新手 5 級 ‧ 2020-03-26 15:19:34 檢舉

好的,感謝 在請問一下 剛剛發現只有第一張圖片吃的到 後面一樣顯示不出來,是否要寫在迴圈裡??
https://ithelp.ithome.com.tw/upload/images/20200326/20120490wZpQWWBCxT.png

ch_lute
好像是欸 XD
可以改這樣

src=\"(.+)\" (style|)

ccc123
如果你的 src 規則不一樣那你可能要加判斷
顯示不出來的原因像你上面的圖
一個是相對路徑 但你有加網址給他
另外一個是絕對路徑 你再加網址給他就顯示不出來了

ch_lute iT邦新手 5 級 ‧ 2020-03-26 15:32:17 檢舉

ccc123這張圖的內容好像跟一開始問題內的code不一樣?
能提供實際的code和jasn的介紹看看

ccc123 iT邦新手 5 級 ‧ 2020-03-26 15:35:46 檢舉
ch_lute iT邦新手 5 級 ‧ 2020-03-26 15:40:15 檢舉

ccc123你這段寫的內容是 li標籤開頭到結尾而已,而中間只包了img + h3,所以第二個黃框有問題的那張圖應該不是這段code產生的
找到那段code把 {imgurl} 補上去

ch_lute iT邦新手 5 級 ‧ 2020-03-26 15:48:49 檢舉

ccc123有問題的那段看起來是沒有做字串處理的Item[i].介紹

ccc123 iT邦新手 5 級 ‧ 2020-03-26 16:01:15 檢舉

我用在codepen上 請您看一下
https://codepen.io/bob1127/pen/LYVZyYa?editors=1111
這是我最初的寫法

問題是 他裡面會有的有超過一張圖
沒什麼規則
到底誰做 opendata 會這樣放
真的要做的話只能把全部印出來再來把 src 的相對路徑 改成網址
因為介紹裡面是直接把 html 放進去

ccc123 iT邦新手 5 級 ‧ 2020-03-26 16:08:53 檢舉

我當初也是覺得蠻奇怪的.. 所以我需要重新找資料嗎

ccc123 iT邦新手 5 級 ‧ 2020-03-26 16:13:35 檢舉

了解 感謝耐心回答

ccc123幫你試著清理資料
codepen

ccc123 iT邦新手 5 級 ‧ 2020-03-28 10:07:40 檢舉

THX

我要發表回答

立即登入回答