JavaScript print info of an array inside an array of object in a html section

Question

I have this array of object that contains info string number array I'm trying to print all the info of touristActivities inside an html <section> I want to print first the information of stepOne in a section tag then the information of stepTwo in another section tag touristActivities array can contain more the these two steps my code below i

Accepted Answer

The thing is your functions directly modify the HTML. It is tightly coupled. So you lose quite a bit of control over the output. With your code the sequence of these function calls is important because the output will depend on the calls. E.g. first description() must be followed by time(). Now you want to wrap all this, but you have already written it to the DOM.The sections span the content you want to generate from each step. Therefore, they have to wrap everything inside the for-loop there.Instead of directly modifying the DOM, write the output of your functions to an array buffer. After the loop you will attach the whole content that you have created to the section element.So you return the HTML from your functions, store it into the array buffer and once you looped over the section, you can combine/add the content with buffer.join('') and close it.This way, you split the generators from the assembly code.Here is a working example: const database = [{ sectorId: 1, sectorName: "السياحة", sectorIcon: "icon-1.png", sectorN: "tourism", licenseTitle: ["إصدار ترخيص مرافق الإيواء السياحي", "الأنشطة السياحية"], licenseDesc: ["تقديم خدمات الترخيص لنشاط الفنادق والشقق المخدومة والمخيمات والنزل وفنادق الكبائن والشاليهات.", "تقديم خدمات الترخيص لوكالات السياحة والسفر وتنظيم الرحلات السياحية وحجز وحدات الإيواء السياحي وتسويقها."], licenseNum: ["7960", "7961"], touristActivities: [ stepOne = { subTitle: "إصدار رخصة استثمار للمستثمر الأجنبي", description: "إصدار رخصة استثمار لغير السعوديين لمزاولة الأنشطة التجارية بما يتوافق مع الاشتراطات والمتطلبات المحددة.", duration: "يوم واحد", money: "٢٠٠٠", year: "سنة - ٥", concernedParty: ["وزارة الاستثمار"], concernedPartyLogo: ["thumbnail_2.png"], address: "", phone: "١٩٩١١", website: "https://hrsd.gov.sa/ar", mail: "info@hrsd.gov.sa", requirements: ["ألا يكون النشاط الاستثماري ضمن قائمة الأنشطة المستثناة من الاستثمار الأجنبي.", "أن تكون مواصفات المنتج مطابقة للمواصفات السعودية أو الخليجية أو الدولية.", "ألا يكون طالب الترخيص قد صدرت ضده قرارات نهائية بسبب مخالفات لأحكام النظام داخل المملكة أو خارجه.", "أن يلتزم طالب الترخيص بالشروط والتعهدات الملحقة بنموذج طلب الترخيص الاستثماري.", "أن يحقق منح الترخيص أهداف الاستثمار وتطبيق هذه الشروط والضوابط على طلبات تجديد الترخيص."], needs: [ "صورة السجل التجاري وعقد التأسيس للمنشاة في بلدها مصدقة من الجهات المختصة والسفارة السعودية.", "صورة من حجز الاسم التجاري من وزارة التجارة.", "مشروع عقد تأسيس شركة ذات مسؤولية محدودة صورة من.", "مشروع عقد التأسيس والنظام الأساسي للشركة المساهمة صورة من.", "إرفاق قرار الشركاء رغبتهم في الاستثمار في المملكة موضحاً به أسماء الشركاء ورأس المال ونسبة ملكية كل شريك والمركز الرئيس للمنشأة وطبيعة النشاط.", "تعيين المدير العام وتحديد صلاحياته مصدقًا من الجهات المختصة والسفارة السعودية.", "صورة من جواز السفر للمدير العام.", "صورة من الهوية الوطنية وبطاقة العائلة إذا كان أحد الشركاء يتمتع بالجنسية السعودية.", "صورة من السجل التجاري لإثبات المهنة أو مستخرج من الأحوال المدنية.", "تقديم موافقة مبدئية من الوزارات أو الهيئات المعنية إن كان النشاط يتطلب موافقة.", "تقديم خطة عمل تفصيلية.", "تقديم ميزانية للمنشاة طالبة الترخيص من خارج المملكة لفترة لا تقل عن 3 سنوات توضح سلامة الوضع المالي معتمدة من مكتب محاسبي ومصدقة من الجهاز المعني ومن سفارة المملكة.", "إثبات القدرة المالية على الاستثمار بما يتناسب مع رأس مال المشروع وحصة كل شريك وبما يتناسب مع خطة العمل المقدمة." ], linkTitle: "اضغط لاصدار الرخصة عبر المركز السعودي للأعمال", link: "https://www.ncc.gov.sa/ar/Pages/default.aspx", }, stepTwo = { subTitle: "إصدار سجل تجاري", description: "وثيقة قانونية تحتوي على بيانات التاجر والنشاط التابع له تمكنه من مزاولة نشاطه بتصريح رسمي وفق الاشتراطات والمتطلبات المحددة.", duration: "حسب التصنيف", money: "حسب التصنيف", year: "", concernedParty: ["وزارة التجارة"], concernedPartyLogo: ["thumbnail_1.png"], address: "", phone: "١٩٩١١", website: "https://hrsd.gov.sa/ar", mail: "info@hrsd.gov.sa", requirements: ["ألا يقل العمر عن 18 سنة.", "ألا يكون موظف حكومي.", "ألا يقل رأس المال عن 5000 ر.س.", "لا يشترط إصدار سجل فرعي إذا كان بنفس النشاط وبنفس المنطقة الإدارية."], needs: [ "تقديم طلب لتأسيس الشركة إلكترونيًا عبر بوابة أعمال الشركات. aamal.sa", "خطاب موقع من المؤسسين بتأسيس الشركة.", "صورة بطاقة الأحوال.", "ألا يقل رأس المال عن 500,000 ريال.", "صورة من مشروع نظام الشركة الأساسي وعقد تأسيس الشركة.", "مشروع نظام الشركة الأساسي وعقد تأسيس الشركة.", "خطاب من الشركة بإصدار فرع شركة يتضمن مدينة الفرع ومدير الفرع مصدق من الغرفة التجارية.", "التأكيد على المستثمر بالإيداع بعد انتهاء السنة المالية للشركة." ], linkTitle: "اضغط لاصدار الرخصة عبر المركز السعودي للأعمال", link: "https://www.ncc.gov.sa/ar/Pages/default.aspx", } ] }, { sectorId: 2, sectorName: "التعليم", sectorIcon: "icon-2.png", sectorN: "education", licenseTitle: ["إصدار ترخيص مدرسة أهلية بمنهج وطني أو عالمي", "إصدار ترخيص مركز الإشراف والتدريب التربوي الأهلي", "إصدار ترخيص معاهد اللغات", "إصدار ترخيص منشأة تدريبية"], licenseDesc: [], licenseNum: ["7950", "7951"] },];let title = document.querySelector(".title");let subTitle = document.querySelector(".subTitle");let rightSection = document.querySelector('.right');function getInfo(id) { for (let i = 0; i < database.length; i++) { if (database[i].sectorId === parseInt(id)) { title.innerHTML += `

`; title.innerHTML += `

${name}

`; const activities = database[i].touristActivities; const contentBuffer = []; for (let activity of activities) { subTitle.innerHTML += `

${activity.subTitle}

`; contentBuffer.push('

'); contentBuffer.push(description(activity.description)); contentBuffer.push(time(activity.duration)); contentBuffer.push(money(activity.money, activity.year)); contentBuffer.push(concerned(activity.concernedParty, activity.concernedPartyLogo, activity.address, activity.phone, activity.website, activity.mail)); contentBuffer.push(requirements(activity.requirements)); contentBuffer.push(needs(activity.needs)); contentBuffer.push(link(activity.linkTitle, activity.link)); contentBuffer.push('

'); } rightSection.innerHTML = contentBuffer.join(''); } }}getInfo(1);function description(desc) { return `

وصف الخطوة

${desc}

`;}function time(timeinfo) { return `

المدة الزمنية

${timeinfo}

`;}function money(m, y) { return `

المقابل المالي

${m} ر.س / ${y} سنوات كحد أقصى

`;}function concerned(a, b, m, p, w, e) { return `

الجهة المعنية

${a}

العنوان

${m}

الهاتف

مركز الاتصال الموحد s${p}

المنصة الإلكترونية

${w}

البريد الإلكتروني

${e}

`;}function requirements(dt) { return `

الاشتراطات

${dt.map(rq =>`

${rq}

`).join("")}

`;}function needs(dt) { return `

المتطلبات

${dt.map(nd =>`

${nd}

`).join("")}

`;}function link(lt, li) { return `

احصل على رخصتك عبر منصة الأعمال

${lt}

`;}

Advertisement

Answer