台灣最大程式設計社群網站
線上人數
825
 
會員總數:242933
討論主題:187836
歡迎您免費加入會員
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
迴圈值問題
價值 : 100 QP  點閱數:569 回應數:17

樓主

熱帶島嶼
門外漢
0 7
123 11
發送站內信

請問各位大大
我的迴圈要製作出如下的表格
https://imageshack.com/a/img923/9452/MvxXav.jpg

但正確的呈現應該為紅色字部分...這哪裡出錯?

var default_boxMac=[];
//設區域變數
function search_store(store) {
default_boxMac=[];
$('.store_name').empty();
brand.storeLocation.forEach(function(d) {
d.vendor_list.forEach(function(d) {
d.store_List.forEach(function(store_List) {

store_List.box.forEach(function(box) {

if (d.vendor_number == store) { //品牌編號
var store_name = "<tr class='store_name'><td>" + store_List.store_name + "</td><td class='totallong'></td><td class='totalshort'></td><td class='totalnotindoor'></td><td class='average'></td><td class='rushtime'></td></tr>"
$('#thing_table').append(store_name);
default_boxMac.push(box.lbox_mac);

}
})
})
})
})
// console.log(default_boxMac);
for(i=0;i<default_boxMac.length;i++){

$.ajax({
type: 'POST',
url: 'total', //接php的api,若接java的api要加{{ app.java_api}}
data: { 'lbox_mac': default_boxMac[i],'type':'day','date':'2017-11-12'},
dataType: 'json',
success: function(data) {

data.forEach(function(d) {
$('.totallong').append(d.p_data.totallong+',');
// $('.totalshort').append(d.p_data.totalshort+',');
// $('.totalnotindoor').append(d.p_data.totalnotindoor+',');
// $('.average').append(d.p_data.average+',');
// $('.rushtime').append(d.p_data.rushtime+',');
})
},
error: function() {
alert('尚無資料!');
}
}); //end Ajax-total
}







搜尋相關Tags的文章: [ 迴圈 ] , [ foreach ] ,
本篇文章發表於2018-03-19 14:51
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
或許你先學一下如何運用程式標簽會比較好。

這樣很難看你的程式碼。
本篇文章回覆於2018-03-19 18:15
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

熱帶島嶼
檢舉此回應

本篇文章回覆於2018-03-19 18:51
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

淺水員
檢舉此回應
$('.totallong') 會取得所有 class==totallong 的集合
所以會一次都改

為了修正這個問題,也許會想到


但這樣會發現那個 i 值會出問題
因為 ajax 是異步請求
所以通常在請求返回時,i已經加到最後的值了

所以還需要透過 closure 的方式來保留那個變數
下面是範例:

fake.php (產生測試資料)


index.html

本篇文章回覆於2018-03-19 22:44
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

熱帶島嶼
檢舉此回應
default_boxMac已帶入Ajax裡,如下
https://imageshack.com/a/img924/306/HQsdSr.png

但表格是塞同一筆值,如下
https://imageshack.com/a/img922/5407/ScjK9I.png


本篇文章回覆於2018-03-20 11:32
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
不錯的參考

淺水員
檢舉此回應
其實我對jquery比較不熟,「:nth-child」的用法可能不是我想的那樣。
下面是直接用 dom element 操作就可以了。

如果知道怎麼取 $('.totallong') 集合的第 n 個元素(取出來還是jquery物件)還請告知,讓我學習一下
本篇文章回覆於2018-03-20 23:18
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
最有價值解答

淺水員
檢舉此回應
我剛剛查到了,應該是用「:eq(index)」而不是「:nth-child(index)」。
所以可以用


順便說一下,由於元素操作比較花費效能。所以會盡可能避免在迴圈內重複用jquery查詢
而是事先用變數儲存查詢的結果,所以 4F:37~40 行的程式碼可以改這樣


另外其實也可以利用陣列的 join 方法來產生逗號分隔
此外要修改的是<td>內的文字,比起append(),會比較建議用text()方法
(一樣針對37~40 行)

本篇文章回覆於2018-03-20 23:34
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
不錯的參考

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
那個~~~~~教一個東西好了。
這點淺水員也學一下吧。

jquery其實是有針對集合物件做單一分別處理的動作的。
也就是說其實是不需要用到eq來處理的


其實我還不太明白發問者要的東西是什麼,原諒我真的不太清楚。
所以這邊大約先依你目前寫的程式堙A指出一些不該犯的問題。

1.用for來跑ajax是很要不得的行為。
其1增加請求的連續性效能問題。
其2有變數繼承性的問題,因為我看你並沒宣告私域變數。這會發生後蓋前的行為。
其3,要記得ajax是屬於後載入制的backcall行為。也就是它並不一定會立即產生success事件對應。
正規的做法是要將需要的參數整理好後,再一次性的ajax將資料取回後再做你的排版。

2.function的宣告還是習慣性放到最後面。不要插在程式碼中間。免得容易誤會。

3.function如果會在同一頁面上重覆呼叫兩次以上,最好將傳送的變數給與另一個私域變數上
要知道javascript有個很討厭的特性。參數如無特別指定範圍位置的情況下。都會依第一個宣告位置為主範圍位置。
也就是很容易變成全域性的變數。
由其是像操作ajax這種bakecall制的東西。很容易發生第一次要用的變數,會被第二次呼叫的變數給取代掉。

以上先給你參考。
本篇文章回覆於2018-03-21 16:16
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
回應

淺水員
檢舉此回應
我對原發問者的題目是這樣理解的:

1. 已知資料:[{店名,編號},…]
2. 已知API:可透過"編號"查詢對應的"資料"
3. 目標是畫出 |店名|資料| 的表格

原發問者的作法:
1. 將[{店名,編號},…]畫成 |店名|資料(尚未取得)| 表格,但資料欄位留空。
2. 透過ajax查詢"編號"所對應的"資料"。
3. 將"資料"填回已描繪的表格中。

由於我不知道原發問者是不是可以動到伺服器端的程式
所以就照著他原本的邏輯回答了

不然較好的做法是:(這必須後端API有支援)
1. 透過ajax,一次性的送出"編號陣列",並返回對應的json結構。(只需要一次請求)。
2. 根據接收到的資料直接畫出表格。
本篇文章回覆於2018-03-21 18:17
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
9樓
作者回應

熱帶島嶼
檢舉此回應
我發問問題如淺水員所述

for(i=0;i<default_boxMac.length;i++)
runAjax(i);
嘗試這寫法會產生~店名編號與要餵給ajax的編號,陣列排序不同
後來用 tostring的寫法可解!
謝謝各位大大細心解惑!



本篇文章回覆於2018-03-22 10:06
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
10樓
回應

淺水員
檢舉此回應
那個toString其實只是產生逗號分隔的陣列資料
之所以能夠這樣做的原因是後端的API有支援一次查詢多筆"編號"的資料

在這種狀況下就不需要用到:eq了,可以利用7F的寫法如下(替換掉9F:30~41行)


另外下面是我比較喜歡的作法
(盡量減少變動文件結構的次數)

本篇文章回覆於2018-03-22 16:40
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
11樓
回應

淺水員
檢舉此回應
To:浩瀚星空
我剛剛用console.log去看你在7F提到的 v 值
發現那是 Dom Element Object 而不是 jquery 的物件
所以應該是搭配 .innerHTML 或是 .textContent 操作比較正確?
本篇文章回覆於2018-03-22 16:51
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
12樓
回應

淺水員
檢舉此回應
這是剛剛突然想到的狀況
假設我們送出的"編號"跟伺服器對不上
那麼也許他送回來的數量跟原本預設的不一樣

而上述的程式中,並沒有確認送回來的JSON關於編號的資訊
這可能會在未來的某種狀況下產生BUG
如果是商用的話,說不定會變成A廠商的訂單跑到B廠商去的情形
所以最好在資料送回來之後再次核對"編號"是否跟原本相同
本篇文章回覆於2018-03-22 17:16
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
13樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
那原本就是送 Dom Element Object
不過你怎麼會有此一問??
你真的對jquery不是很熟喔

其實jquery你並不能將其當成一種js的物件來看
它只是一個幫你快速方便處理Element Object的一種工具。
雖然也的確可以當成物件來看也不為過。

只是要了解所謂的javascript。其物件的對應並非是我們想像中後端程式的物件理念是一樣的東西。

就如你有個東西你就有點誤會了。
如用 innerHTML 這個javascript的原生語法。
其在jquery對應的方法就是html()
textContent 就是 text()

其實這兩個意思都是一樣的。jquery只是將其化為更方便使用而已。但它還是原生javascript的處理。

就如我7f那樣的用法。
我雖然用fucntion(i,v)。但其實也可以直接用function()
而在each的用法除了可以應用在元件集合體之外。
也可以應用到json。



最好不要將jquery當成一個物件會比較好。當成工具會比較好理解
本篇文章回覆於2018-03-23 11:18
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
14樓
回應

淺水員
檢舉此回應
我承認自己比較少用jquery啦!

名詞的部分:
像是用 document.getElementById 取得的東西,我知道是 Dom Element Object
至於 $("div") 取得的東西,我不知道怎麼稱呼他比較好,就把它叫做 jquery 物件了。(也許這有比較正式的名稱)

至於為什麼一開始以為是jquery物件
是因為 7F 的程式碼中,看到 v.text("text")
原生的 javascript 並沒有 .text(...) 方法
所以一開始看到這種寫法,我以為那個 v 是 jquery 物件

我的理解是:
[Dom Element Object] 可以用 .innerHTML 或 .textContent ,但不能用 .html() 或 .text()
[$()取得的東西] 可以用.html() 或 .text(),但不能用 .innerHTML 或 .textContent



本篇文章回覆於2018-03-23 11:57
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
15樓
回應

淺水員
檢舉此回應
我有試過用 document.getElementById(...) 的確不能用 .html .text() 等方法

至於 .each() 可以用在一般 array 的部分
官方文件的確有明確寫出
"A generic iterator function, which can be used to seamlessly iterate over both objects and arrays."
本篇文章回覆於2018-03-23 12:10
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   

回覆
如要回應,請先登入.