مشکل در نمایش اطلاعات از api در html
سوال
سلام
وقتتون بخیر
من میخوام از api لیستی از اطلاعات رو دریافت ودر html نمایش بدم ، تاحدی خوب پیش رفتم ولی فقط آخری نمایش داده میشه و بقیه لیست نمایش داده نمیشه
این کدی که نوشتم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<script> fetch('http://127.0.0.1:8000/api/quiz/') .then(response => response.json()) .then(data => data.results.forEach(d => document.getElementById("title").innerHTML=`<div class='col-sm-4 mb-2'> <div class='card'> <div class='row '> <div class='col-4 text-center m-auto'><i class="bi bi-bookmark-fill" style="font-size:30px"></i></div> <div class="card-body text-right col-6">${d.title}</div> <hr class='m-auto' style="width:90%"> </div> <div class='row'> <div class='col-4 text-center m-auto'><i class="bi bi-card-list" style="font-size:27px"></i></div> <div class="card-body text-right col-3">تعداد سوالات</div> <div class="card-body text-center col-3"></div> </div> <div class='row'> <div class='col-4 text-center m-auto'><i class="bi bi-stopwatch-fill" style="font-size:27px"></i></div> <div class="card-body text-right col-3">زمان</div> <div class="card-body text-center col-3">${d.time} دقیقه</div> </div> <div class='row'> <div class='col-4 text-center m-auto'><i class="bi bi-people-fill" style="font-size:27px"></i></div> <div class="card-body text-right col-3">شرکت کنندگان</div> <div class="card-body text-center col-3">{{q.result.count}} نفر </div> </div> <div class='row'> <a href="" class="btn btn-primary col-5 m-auto mb-2">ثبت نام</a> </div> </div> </div>`)) </script> |
در حال بررسی
0
1 سال
1 پاسخ
40 دیده شده
1
پاسخ ( ۱ )
باسلام و احترام، دلیلش این هست که هر بار که حلقه foreach اجرا میشه، کدهای html قبلی پاک می شن و کدهای جدید توش ریخته میشه! برای جلوگیری از این اشتباه شما باید هر دفعه برای هر رکورد جدید که داخل حلقه foreach میاد کدهای قبلی رو به اضافه کدهای جدید کنید تا در نهایت همه ردیف ها نمایش داده بشه. به صورت زیر: