Mesusjk
3 سال پیش توسط Mesusjk مطرح شد
2 پاسخ

ایجاد حلقه برای object در جاوااسکریپت

سلام دوستان. فرض کنید من یه تگ خالی ul در فایل html و یه object در فایل js به این شکل زیر دارم:

let data = {
    "key1": ["item"],
    "key2": ["item", "item", "item"],
    "key3": ["item", "item"],
}

میخوام به ازای هر item در data (که در اینجا سه تا هستن)، یه تگ li بسازم. حالا میخوام دو تگ span هم بسازم و در span اولی، key هر item قرار بگیره و در span دومی هم تمام item هایی که در آرایه ی مربوط به key هستن قرار بگیرن.
بطوری که اگه بخوایم خروجی نهایی رو ببینیم، به این صورت باید باشه:

<ul>
    <li>
        <span>key1:</span>
        <span>item</span>
    </li>
    <li>
        <span>key2:</span>
        <span>item, item, item</span>
    </li>
    <li>
        <span>key3:</span>
        <span>item, item</span>
    </li>
</ul>

خیلی ممنون میشم راهنماییم کنید که چطور میتونم این رو پیاده سازی کنم


ثبت پرسش جدید
فریبرز شالقونی پور
تخصص : طراح و برنامه نویس حوضه وب
@fariborz0015 3 سال پیش آپدیت شد
1

ببین اول تو نیاز داری که تو ابجکت حلقه بندازی که این با این تیکه کد زیر انجام میشه و key هارو به شکل حلقه برات در میاره

for ( itemObject in data ){
         console.log(itemObject)
}

حالا با map یا For یا foreach میتونی یه حلقه دیگ هم توی دارایی های هر key بندازی که میشه به صورت کلی مثل زیر :

for ( itemObject in data ){
         data[itemObject].map(item=>console.log(item))
}

حالا میمنونه که چطور دلت مخیخواد استفاده کنی اگر تو ری اکت و از jsx استفاده میکنی که خیلی راحته اگر هم با js خالی داری انجامش میدی میتونی از createElemnt استفاده کنی ، نیاز داشتی بگو بیشتر شرح بدم


Mesusjk
تخصص : برنامه نویس جنگو و پایتون
@Mesusjk 3 سال پیش مطرح شد
1

خیلی ممنونم از راهنماییتون. حل شد و درست کار میکنه 👌
@fariborz0015


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام