作者anubiss (左半邊的虛無)
看板Web_Design
標題[問題] 如何美化讀到的json資料
時間Thu Oct 8 04:59:29 2015
想請問一下關於讀到的json內容 如何在html裡面變得比較美觀
http://huayuheh.com/billbo/week4/BBnew/
帳號123
密碼123
目前老師給的json資料 是像
1 Paneer Cniii 8.99\n1 Medium\n\n1 Veg Maiai Koita 8.99\n1 Medium.\n\n1 Union Kuicna 2.25\n\n1 Kingfisher - 12 oz 3.95\n\n1 Sweet Lasei 1.99\n\n1 Sweet Lassi 1.99\n\n1 Kingfisher - 12 oz 3.95\n\nSub Totai: 32.11\n\nTax: 2.81\n\nTotai: 34.92\n\nAmount Due: 34.92
(在 console 中可看到完整json資料)
查到一些美化的方式 是用js replace();
不知道有沒有簡單一點的方式可以讓資料排的比較好看
目前是有寫
items = items.replace(/\n\n/g,"</li><li>");
items = items.replace(/(\d+.\d+)/g,"<span>$$1</span>");//金額
items = items.replace(/<li>(\d+\s+)/g,"<li><em>$1</em>");//產品數量
items = items.replace(/(\w+\s)/g,"<strong>$1</strong>");//產品名稱(不太正確)
目前只能選取產品數量 還有金額 不知道該怎麼寫replace()中的條件
才能表示出 中間產品的名字 或是 sub total 的指定金額
最終是希望可以做成像表格 產品部分的表頭是 數量 名稱 價格 備註
1 paneer cniii $8.99 1 medium
...
價格那邊可以合併(數量和名稱的欄位) 變成 sub total $32.11
Tax $2.81
類似這樣的感覺 不知道能不能做出來?
十分感謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 67.170.248.110
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1444251572.A.540.html
→ airtsubasa: 有老師了為啥不問老師?最笨的方法迴圈下去跑,解析, 10/08 09:09
→ airtsubasa: 每個\n一個td,下一筆就tr,超像作業zz 10/08 09:09
推 ian90911: 請老師把json設計成有屬性的 就可以方便做parse了 10/08 09:42
推 shadowjohn: 先把內容轉成二維陣列,要匯table csv xml都是一行... 10/08 10:45
→ anubiss: 老師的作業就是把這個美化XD 10/08 10:47
→ anubiss: 每個產品轉成js array ? 10/08 10:59
推 shadowjohn: 我是覺得先作好資料歸類,一看就大概知道幾種狀況了 10/08 11:19