การใช้งาน jQuery.each() ในการ loop ข้อมูล list

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

การใช้งาน jQuery.each() ในการ loop ข้อมูล list

โพสต์ที่ยังไม่ได้อ่าน โดย ewqolf »

การ each นั้นก็คือการ Loop ที่จะนับจำนวนรอบของการ Loop ตามจำนวนข้อมูลที่เราใส่เข้ามาใน list หรือ object ที่เราใส่มาซึ่งจากระทู้ที่แล้วผมได้สอนการส่งข้อมูลแบบ ajax ไปแล้ววันนี้จึงอยากที่จะมาสอนการใช้งาน each เพื่อที่ loop คำสั่งต่างๆตามจำนวนข้อมูลที่เรามี ซึ่งการทำeach loop นั้นจะอยู่ในส่วนของภาษา Javascript ซึ่งเราจะแยกไฟร์ Javascript ออกมาหรือเขียน HTML ก็ใช้ได้เหมือนกันแต่เราต้องมีการประกาศที่หัวก่อนว่าเราต้องการจะใช้งาน jquery ajax เสียก่อนถึงจะใช้งานได้

ซึ่งวิธีการเขียน each นั้นก็ไม่ยากนักซึ่งเหมือนกันทุกครั้งที่เราต้องการจะใช้งาน jquery เราจำเป็นที่จะต้องประกาศที่หัวขึ้นมาก่อนโดยโค้ด

โค้ด: เลือกทั้งหมด

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
ที่อยู่ที่ไฟร์ index.html ในส่วนของ Head จากนั้นเราจะมาที่ body แล้วเขียนโค้ด

โค้ด: เลือกทั้งหมด

<div id="output"></div>
ขึ้นมาเพื่อบ่งบอกว่าเราจะใส่ข้อมูลที่ตัวนี้
จากนั้นให้เราเปิดแท็ค script ขึ้นมาตามด้วยโค้ดด้านล่าง

โค้ด: เลือกทั้งหมด

<script>
        $.get('/test', function(data) {
        $.each(data, function(k,v){
            let show=document.getElementById("ncardr")
            show.append(`${v}  `)
        })
    })
    </script>
ซึ่งจากโค้ดของกระทู้ที่แล้วเราจะไปดึงข้อมูลมาจากไฟร์ flask python อีกทีนึงซึ่งโค้ดก็ตามด้านล่าง

โค้ด: เลือกทั้งหมด

from flask import Flask,render_template
app=Flask(__name__)
app.config['SECRET_KEY']='secret_key'

@app.route('/')
def index():
    return render_template('index.html')
    
@app.route('/URL')
def URL():
	x = ["nineA","nineB","nineC","nineD"]
        return x
ซึ่งโค้ดก็จะส่งค่า x ไปหา Index.html
จากโค้ดนี้ เราก็จะได้ผลลัพธ์
ผลลัพธ์ each
ผลลัพธ์ each
ผลลัพธ์ each.PNG (856 ไบต์) Viewed 506 times
จากโค้ดจะเห็นได้ว่าเราจะต้องทำการเปิดแท็ค Flask ขึ้นมาเสียก่อนจากนั้นให้เราทำการ rount ไปที่ / ก่อนแล้วให้ render ไปที่หน้า index.html ก่อนจากนั้นพอไปที่หน้า index.html จากนั้นก็จะเจอโค้ดที่จะมีคำสั่ง Get ซึ่งจะกลับมารันโค้ดในส่วนของ route URL ซึ่งก็จะ return ค่า x กลับมาที่หน้า index.html จากนั้นเราได้ค่า x ที่เป็น list อยู่ใน Data จากนั้นจะมีการแยกตัวแปรกันเกิดขึ้นก็คือตัวแปร k และตัวแปร v ตัวแปร k นั้นจะเก็บเลขของชุดข้อมูลนั้นๆว่าเป็นข้อมูลชุดที่เท่าไหร่ๆ และตัวแปร v จะเป็นส่วนของข้อมูล ซึ่งการที่เราจะเอาข้อมูลนั้นมาใช้ได้เราก็จะต้องเขียนว่าเราต้องการแสดงอะไรบ้างในส่วนโค้ด append ซึ่งข้างในนั้นสามารถเขียนเป็นภาษา HTML ได้โดยเราจะต้องใช้ `` ก่อนแล้วการเขียนโค้ด HTML แล้วเราอยากเอาตัวแปรใส่เข้าไปด้วยเราจะต้องใช้ ${v} แทนตัวแปรเฉพาะในส่วนของ html

อ้างอิง
https://api.jquery.com/jquery.each/
https://stackoverflow.com/questions/733314/jquery-loop-over-json-result-from-ajax-success
https://makitweb.com/how-to-use-the-each-function-in-jquery/
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 56