Hướng dẫn how to iterate list in html table - cách lặp lại danh sách trong bảng html

Chào mọi người,

Tôi hơi mắc kẹt khi cố gắng tạo nhiều bảng HTML [hoặc các hàng bảng có thể nhìn thấy có điều kiện] trong một cửa sổ bật lên dựa trên giá trị của các trường trong một mảng. Trong trường hợp này, nhiều thử nghiệm đang được thực hiện [tối đa năm] trên một mét, nhưng tôi chỉ muốn hiển thị các bảng kết quả cho các thử nghiệm thực sự được thực hiện để tôi không có các hàng bảng trống và/hoặc sử dụng nhiều bất động sản hơn cần thiết. Dữ liệu phẳng, do đó có các trường dự phòng [như bạn có thể thấy trong các biến toàn cầu] thay vì mối quan hệ một-nhiều. Có một trường boolean [add_test_#] được lật từ "không" đến "có" trước khi mỗi bài kiểm tra được thực hiện. Mỗi người có giá trị mặc định là "Không". Mã dưới đây hoạt động tuyệt vời cho thử nghiệm đầu tiên, nhưng không tạo ra bất kỳ bảng bổ sung nào trong cửa sổ bật lên để kiểm tra bổ sung. Tôi nhận ra mã có thể được tối ưu hóa, nhưng tôi không & nbsp; muốn dành quá nhiều thời gian hơn cho việc này cho đến khi tôi biết điều này có thể đạt được.

var myList = [$feature.ADD_TEST_1, $feature.ADD_TEST_2, $feature.ADD_TEST_3, $feature.ADD_TEST_4, $feature.ADD_TEST_5]
var field1 = [IIF[IsEmpty[$feature.T1_VOL_MIN], "No Value", $feature.T1_VOL_MIN], IIF[IsEmpty[$feature.T2_VOL_MIN], "No Value", $feature.T2_VOL_MIN], IIF[IsEmpty[$feature.T3_VOL_MIN], "No Value", $feature.T3_VOL_MIN], IIF[IsEmpty[$feature.T4_VOL_MIN], "No Value", $feature.T4_VOL_MIN], IIF[IsEmpty[$feature.T5_VOL_MIN], "No Value", $feature.T5_VOL_MIN]] 
var field2 = [IIF[IsEmpty[$feature.T1_TVOL_FLWD], "No Value", $feature.T1_TVOL_FLWD], IIF[IsEmpty[$feature.T2_TVOL_FLWD], "No Value", $feature.T2_TVOL_FLWD], IIF[IsEmpty[$feature.T3_TVOL_FLWD], "No Value", $feature.T3_TVOL_FLWD], IIF[IsEmpty[$feature.T4_TVOL_FLWD], "No Value", $feature.T4_TVOL_FLWD], IIF[IsEmpty[$feature.T5_TVOL_FLWD], "No Value", $feature.T5_TVOL_FLWD]]
var field3 = [IIF[IsEmpty[$feature.T1_ACCURCY], "No Value", $feature.T1_ACCURCY], IIF[IsEmpty[$feature.T2_ACCURCY], "No Value",$feature.T2_ACCURCY], IIF[IsEmpty[$feature.T3_ACCURCY], "No Value", $feature.T3_ACCURCY], IIF[IsEmpty[$feature.T4_ACCURCY], "No Value", $feature.T4_ACCURCY], IIF[IsEmpty[$feature.T5_ACCURCY], "No Value", $feature.T5_ACCURCY]]

for [var v in myList]{
    if[myList[v] == "Yes"]{
        var testNum = [v + 1]
        var i = v
        var firstField = field1[i]
        var secondField = field2[i]
        var thirdField = field3[i]
        var myTable = { 
        	"type" : "text", 
        	"text" : `
            
Test ${testNum} Results
Volume Min ${firstField}
Total Volume Flowed ${secondField}
Accuracy [%] ${thirdField}
` } return myTable }else{ return "No results for Test " + [v + 1] } }

@Xanderbakker & nbsp; @paulbarker, có suy nghĩ nào về những gì có thể gây ra vấn đề không?

Cảm ơn trước!

Peter

  • giải trí
  • ArcGIS trực tuyến
  • HTML
  • văn bản phong phú
  • mẫu chữ

  • Tất cả những bài viết
  • Chủ đề trước
  • Chủ đề tiếp theo

1 giải pháp

Bạn trở lại bên trong vòng lặp, không phải bên ngoài.

Khi bạn trở về từ một chức năng, bạn ngừng thực hiện nó vào thời điểm đó. Mọi thứ sau khi nó sẽ không bị xua tan:

function test[] {
    var x = 2
    return x // returns 2
    // everything after this will never get executed.
    // the new value of x will never be returned, x won't even get changed at all.
    x += 5
    return x
}

Vì vậy, khi bạn quay lại bên trong một vòng lặp, bạn chỉ trả lại phần tử đầu tiên:

var arr = [25, 30, 103]
for[var i in arr] {
    return arr[i] + 1  // this will just return 26 and then stop
}

Những gì bạn muốn làm là thế này:

  • Tạo một đối tượng trước vòng lặp sẽ giữ tất cả các kết quả trung gian. Trong hầu hết các trường hợp, đây sẽ là một mảng hoặc một chuỗi.
  • Bên trong vòng lặp, nối kết quả trung gian của bạn vào đối tượng đó.
  • Sau vòng lặp, trả về đối tượng đó.
var arr = [25, 30, 103]
var output_arr = []
for[var i in arr] {
    Push[output_arr, arr[i] + 1]  // append the intermediate result
}
return output_arr  // this will return [26, 31, 104]

Tất cả trong tất cả những gì bạn chỉ cần tái cấu trúc mã của bạn một chút:

var myList = ["Yes", "Yes", "No", "No", "Yes"]
var field1 = [1, 1, "N/A", "N/A", 1] 
var field2 = [1, 1, "N/A", "N/A", 1] 
var field3 = [1, 1, "N/A", "N/A", 1] 

var myHTML = ""  // this string will hold all the tables

for [var v in myList]{
    if[myList[v] == "Yes"]{
        var testNum = [v + 1]
        var i = v
        var firstField = field1[i]
        var secondField = field2[i]
        var thirdField = field3[i]
        // append the table html. Note that this isn't a dict anymore!
        myHTML += `
            
Test ${testNum} Results
Volume Min ${firstField}
Total Volume Flowed ${secondField}
Accuracy [%] ${thirdField}
` } else { myHTML += "

No results for Test " + [v + 1] + "

" } } // return the complete HTML outside of the for loop return {"type": "text", "text": myHTML}

Chúc một ngày tuyệt vời! Johannes
Johannes

2 trả lời

Bạn trở lại bên trong vòng lặp, không phải bên ngoài.

Khi bạn trở về từ một chức năng, bạn ngừng thực hiện nó vào thời điểm đó. Mọi thứ sau khi nó sẽ không bị xua tan:

function test[] {
    var x = 2
    return x // returns 2
    // everything after this will never get executed.
    // the new value of x will never be returned, x won't even get changed at all.
    x += 5
    return x
}

Vì vậy, khi bạn quay lại bên trong một vòng lặp, bạn chỉ trả lại phần tử đầu tiên:

var arr = [25, 30, 103]
for[var i in arr] {
    return arr[i] + 1  // this will just return 26 and then stop
}

Những gì bạn muốn làm là thế này:

  • Tạo một đối tượng trước vòng lặp sẽ giữ tất cả các kết quả trung gian. Trong hầu hết các trường hợp, đây sẽ là một mảng hoặc một chuỗi.
  • Bên trong vòng lặp, nối kết quả trung gian của bạn vào đối tượng đó.
  • Sau vòng lặp, trả về đối tượng đó.
var arr = [25, 30, 103]
var output_arr = []
for[var i in arr] {
    Push[output_arr, arr[i] + 1]  // append the intermediate result
}
return output_arr  // this will return [26, 31, 104]

Tất cả trong tất cả những gì bạn chỉ cần tái cấu trúc mã của bạn một chút:

var myList = ["Yes", "Yes", "No", "No", "Yes"]
var field1 = [1, 1, "N/A", "N/A", 1] 
var field2 = [1, 1, "N/A", "N/A", 1] 
var field3 = [1, 1, "N/A", "N/A", 1] 

var myHTML = ""  // this string will hold all the tables

for [var v in myList]{
    if[myList[v] == "Yes"]{
        var testNum = [v + 1]
        var i = v
        var firstField = field1[i]
        var secondField = field2[i]
        var thirdField = field3[i]
        // append the table html. Note that this isn't a dict anymore!
        myHTML += `
            
Test ${testNum} Results
Volume Min ${firstField}
Total Volume Flowed ${secondField}
Accuracy [%] ${thirdField}
` } else { myHTML += "

No results for Test " + [v + 1] + "

" } } // return the complete HTML outside of the for loop return {"type": "text", "text": myHTML}

Chúc một ngày tuyệt vời! Johannes
Johannes

2 trả lời

var myList = [$feature.ADD_TEST_1, $feature.ADD_TEST_2, $feature.ADD_TEST_3, $feature.ADD_TEST_4, $feature.ADD_TEST_5]
var field1 = [IIF[IsEmpty[$feature.T1_VOL_MIN], "No Value", $feature.T1_VOL_MIN], IIF[IsEmpty[$feature.T2_VOL_MIN], "No Value", $feature.T2_VOL_MIN], IIF[IsEmpty[$feature.T3_VOL_MIN], "No Value", $feature.T3_VOL_MIN], IIF[IsEmpty[$feature.T4_VOL_MIN], "No Value", $feature.T4_VOL_MIN], IIF[IsEmpty[$feature.T5_VOL_MIN], "No Value", $feature.T5_VOL_MIN]] 
var field2 = [IIF[IsEmpty[$feature.T1_TVOL_FLWD], "No Value", $feature.T1_TVOL_FLWD], IIF[IsEmpty[$feature.T2_TVOL_FLWD], "No Value", $feature.T2_TVOL_FLWD], IIF[IsEmpty[$feature.T3_TVOL_FLWD], "No Value", $feature.T3_TVOL_FLWD], IIF[IsEmpty[$feature.T4_TVOL_FLWD], "No Value", $feature.T4_TVOL_FLWD], IIF[IsEmpty[$feature.T5_TVOL_FLWD], "No Value", $feature.T5_TVOL_FLWD]]
var field3 = [IIF[IsEmpty[$feature.T1_ACCURCY], "No Value", $feature.T1_ACCURCY], IIF[IsEmpty[$feature.T2_ACCURCY], "No Value",$feature.T2_ACCURCY], IIF[IsEmpty[$feature.T3_ACCURCY], "No Value", $feature.T3_ACCURCY], IIF[IsEmpty[$feature.T4_ACCURCY], "No Value", $feature.T4_ACCURCY], IIF[IsEmpty[$feature.T5_ACCURCY], "No Value", $feature.T5_ACCURCY]]
var myTable = ""

for [var v in myList]{
    if[myList[v] == "Yes"]{
        var testNum = [v + 1]
        var i = v
        var firstField = field1[i]
        var secondField = field2[i]
        var thirdField = field3[i]
        myTable += 
            `
Test ${testNum} Results
Volume Min ${firstField}
Total Volume Flowed ${secondField}
Accuracy [%] ${thirdField}
` }else if [myList[v] == "No"] { var testNum = [v + 1] mytable += `
No results for Test ${testNum}
` } } return {"type" : "text", "text" : myTable}

Cheers,

Peter

Làm thế nào để bạn lặp lại thông qua một danh sách trong HTML?

Các yếu tố có thể được lặp lại bằng cách sử dụng một vòng bình thường cho vòng lặp. Số lượng các phần tử trong HTMLCollection có thể được tìm thấy bằng cách sử dụng thuộc tính chiều dài của bộ sưu tập. A For Loop sau đó được chạy đến số lượng các yếu tố. Mỗi mục có thể được truy cập bằng cách sử dụng dấu ngoặc vuông với chỉ mục tương ứng của chúng.using a normal for loop. The number of elements in the HTMLCollection can be found out by using the length property of the collection. A for loop is then run to the number of elements. Each of the items can be accessed by using square brackets with their respective index.

Làm cách nào để tạo một bảng động trong HTML?

Tạo một bảng một cách linh hoạt [trở lại Sample1 ...
Nhận đối tượng cơ thể [mục đầu tiên của đối tượng tài liệu] ..
Tạo tất cả các yếu tố ..
Cuối cùng, nối mỗi đứa trẻ theo cấu trúc bảng [như trong hình trên].Mã nguồn sau đây là phiên bản nhận xét cho Sample1.HTML ..

Làm thế nào để bạn tạo một vòng lặp trong HTML?

HTML không phải là ngôn ngữ lập trình và không có khả năng viết các vòng lặp.Để làm điều đó, bạn sẽ cần một số ngôn ngữ khác để tạo HTML, ví dụ:JavaScript.you will need some other language to generate HTML, e.g. JavaScript.

Làm thế nào để bạn lặp lại một yếu tố?

Sau khi chọn các thành phần bằng cách sử dụng QuerySelectorall [] hoặc getElementsByTagName [], bạn sẽ nhận được một bộ sưu tập các yếu tố như một gật đầu.Để lặp lại các phần tử đã chọn, bạn có thể sử dụng phương thức foreach [] [được hỗ trợ bởi hầu hết các trình duyệt web hiện đại, không phải IE] hoặc chỉ sử dụng vòng lặp cũ đơn giản.use forEach[] method [supported by most modern web browsers, not IE] or just use the plain old for-loop.

Bài Viết Liên Quan

Chủ Đề