關於json物件

javascript jquery ajax api json

ccc123 2020-03-26 14:26:36 ‧ 2916 瀏覽

分享至

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

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

以下是程式碼

謝謝!!!!

咖咖拉 iT邦好手 1 級 ‧ 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=" 前是空格或 "

登入發表討論

直播研討會

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

直播中

1 個回答

listennn08

iT邦高手 5 級 ‧ 2020-03-26 14:41:16

最佳解答

用正則

${items[i].介紹.match(/src=\"(.+)\"/)[1]}

回應 15
分享
檢舉

看更多先前的回應...收起先前的回應...

ccc123 iT邦新手 5 級 ‧ 2020-03-26 14:48:00 檢舉

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

listennn08 iT邦高手 5 級 ‧ 2020-03-26 14:54:19 檢舉

我剛剛看會抓到
/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 檢舉

好的，感謝在請問一下剛剛發現只有第一張圖片吃的到後面一樣顯示不出來，是否要寫在迴圈裡??

listennn08 iT邦高手 5 級 ‧ 2020-03-26 15:25:47 檢舉

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 檢舉

https://opendata.taichung.gov.tw/dataset/3b0653b2-1a9f-11e8-8f43-00155d021202/resource/1d71dd68-bf6f-4f5b-b8a4-19ca6144d39e

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
這是我最初的寫法

listennn08 iT邦高手 5 級 ‧ 2020-03-26 16:05:31 檢舉

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

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

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

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

了解感謝耐心回答

listennn08 iT邦高手 5 級 ‧ 2020-03-26 22:59:47 檢舉

ccc123幫你試著清理資料
codepen

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

THX

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

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

IT邦幫忙