我有一个包含信息字符串编号数组的对象数组
我正试图在一个html<section>中打印touristActivities的所有信息
我想先打印section tag中stepOne的信息，然后打印另一个section tag中stepTwo的信息
touristActivities阵列可以包含更多这两步
我下面的代码我只能在没有section的情况下打印信息
如何在不同的section中为每个步骤打印每个步骤的信息
示例：
<section class="stepOne">
all step One information
</section>
<section class="stepTwo">
all step Two information
</section>
const database = [{
sectorId: 1,
sectorName: "السياحة",
sectorIcon: "icon-1.png",
sectorN: "tourism",
licenseTitle: ["إصدار ترخيص مرافق الإيواء السياحي", "الأنشطة السياحية"],
licenseDesc: ["تقديم خدمات الترخيص لنشاط الفنادق والشقق المخدومة والمخيمات والنزل وفنادق الكبائن والشاليهات.", "تقديم خدمات الترخيص لوكالات السياحة والسفر وتنظيم الرحلات السياحية وحجز وحدات الإيواء السياحي وتسويقها."],
licenseNum: ["7960", "7961"],
touristActivities: [
stepOne = {
subTitle: "إصدار رخصة استثمار للمستثمر الأجنبي",
description: "إصدار رخصة استثمار لغير السعوديين لمزاولة الأنشطة التجارية بما يتوافق مع الاشتراطات والمتطلبات المحددة.",
},
stepTwo = {
subTitle: "إصدار سجل تجاري",
description: "وثيقة قانونية تحتوي على بيانات التاجر والنشاط التابع له تمكنه من مزاولة نشاطه بتصريح رسمي وفق الاشتراطات والمتطلبات المحددة.",
}
]
},
{
sectorId: 2,
},
];
let title = document.querySelector(".title");
let rightSection = document.querySelector('.right');
function getInfo(id) {
for (let i = 0; i < database.length; i++) {
if (database[i].sectorId === parseInt(id)) {
title.innerHTML += `<img src='img/${database[i].sectorIcon}' alt='image'>`;
title.innerHTML += `<h2>${name}</h2>`;
for (let j = 0; j < database[i].touristActivities.length; j++) {
subTitle(database[i].touristActivities[j].subTitle);
description(database[i].touristActivities[j].description);
}
}
}
}
getInfo(1);
function subTitle(st) {
let subTitle = `<div class='subTitle'>
<h3>${st}</h3>
</div>`;
rightSection.innerHTML += subTitle;
}
function description(desc) {
let description = `
<div class="discription">
<div class="description-inner parent">
<div class="descText">
<img src="img/description.png" alt="desc">
<h4>وصف الخطوة</h4>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="descInfo toggle">
<p>${desc}</p>
</div>
</div>
`;
rightSection.innerHTML += description;
}<div class="container">
<div class="title">
</div>
<div class="right">
<div class="subTitle">
</div>
</div>
<div class="left"></div>
</div>问题是您的函数直接修改HTML。它是紧密耦合的。因此，您对输出失去了相当多的控制。对于您的代码，这些函数调用的顺序很重要，因为输出将取决于调用。例如，第一个description()之后必须是time()。现在您想要包装所有这些，但是您已经将其写入DOM。
这些部分涵盖了要从每个步骤生成的内容。因此，他们必须将所有内容都封装在for循环中。
不要直接修改DOM，而是将函数的输出写入数组缓冲区。循环之后，您将把创建的全部内容附加到section元素。
因此，您从函数中返回HTML，将其存储在数组缓冲区中，一旦您在该部分上循环，您就可以将内容与buffer.join('')组合/添加并关闭它。
通过这种方式，您可以从汇编代码中分离生成器。
下面是一个工作示例：
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: "<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3622.702432314261!2d46.721452214877665!3d24.771389754922634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2efd91f30ee055%3A0x13c696d4f4a80ec3!2sHRSD%20Ministry!5e0!3m2!1sen!2slb!4v1639075198016!5m2!1sen!2slb' width='100%' height='180' style='border:0;' allowfullscreen='' loading='lazy'></iframe>",
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: "<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3622.702432314261!2d46.721452214877665!3d24.771389754922634!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2efd91f30ee055%3A0x13c696d4f4a80ec3!2sHRSD%20Ministry!5e0!3m2!1sen!2slb!4v1639075198016!5m2!1sen!2slb' width='100%' height='180' style='border:0;' allowfullscreen='' loading='lazy'></iframe>",
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 += `<img src='img/${database[i].sectorIcon}' alt='image'>`;
title.innerHTML += `<h2>${name}</h2>`;
const activities = database[i].touristActivities;
const contentBuffer = [];
for (let activity of activities) {
subTitle.innerHTML += `<h3>${activity.subTitle}</h3>`;
contentBuffer.push('<section>');
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('</section>');
}
rightSection.innerHTML = contentBuffer.join('');
}
}
}
getInfo(1);
function description(desc) {
return `
<div class="discription">
<div class="description-inner parent">
<div class="descText">
<img src="img/description.png" alt="desc">
<h4>وصف الخطوة</h4>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="descInfo toggle">
<p>${desc}</p>
</div>
</div>
`;
}
function time(timeinfo) {
return `
<div class="time">
<div class="time-inner">
<div class="timeText">
<img src="img/time.png" alt="time">
<h4>المدة الزمنية</h4>
</div>
<img src="img/arrow.png" alt="arrow">
<p class="text">${timeinfo}</p>
</div>
</div>
`;
}
function money(m, y) {
return `
<div class="money">
<div class="money-inner">
<div class="moneyText">
<img src="img/money.png" alt="money">
<h4>المقابل المالي</h4>
</div>
<img src="img/arrow.png" alt="arrow">
<p class="text"><span>${m}</span> ر.س / <span>${y}</span> سنوات كحد أقصى</p>
</div>
</div>
`;
}
function concerned(a, b, m, p, w, e) {
return `
<div class="concerned">
<div class="concerned-inner parent">
<div class="concernedText">
<img src="img/jeha.png" alt="jeha">
<h4>الجهة المعنية</h4>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="concernedInfo toggle">
<div class="concernedInfoContent">
<div class="box">
<img src="img/${b}" alt="logo" class="logo">
<h4 class="logoTitle">${a}</h4>
<p></p>
</div>
<div class="box">
<div class="locationTitle">
<img src="img/location.png" alt="location">
<h4>العنوان</h4>
</div>
<div class="map">${m}</div>
</div>
<div class="box">
<div class="phone">
<img src="img/phone.png" alt="phone">
<div class="phoneText">
<h4>الهاتف</h4>
<a href="${p}" target="_blank">مركز الاتصال الموحد s${p}</a>
</div>
</div>
<div class="website">
<img src="img/almanasa-icon.png" alt="web">
<div class="websiteText">
<h4>المنصة الإلكترونية</h4>
<a href="${w}" target="_blank">${w}</a>
</div>
</div>
<div class="mail">
<img src="img/bared.png" alt="mail">
<div class="webText">
<h4>البريد الإلكتروني</h4>
<a href="${e}" target="_blank">${e}</a>
</div>
</div>
</div>
</div>
</div>
</div>
`;
}
function requirements(dt) {
return `
<div class="requirements">
<div class="requirements-inner parent">
<div class="requirementsText">
<img src="img/terms.png" alt="terms">
<h4>الاشتراطات</h4>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="requirementsInfo toggle">
${dt.map(rq =>`<div class="inner-info">
<input type="checkbox" value="${rq}">
<p>${rq}</p></div>`).join("")}
</div>
</div>`;
}
function needs(dt) {
return `
<div class="needs">
<div class="needs-inner parent">
<div class="needsText">
<img src="img/needs.png" alt="needs">
<h4>المتطلبات</h4>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="needsInfo toggle">
${dt.map(nd =>`<div class="inner-info">
<input type="checkbox" value="${nd}">
<p>${nd}</p></div>`).join("")}
</div>
</div>`;
}
function link(lt, li) {
return `
<div class="link">
<div class="link-inner parent">
<div class="linkText">
<img src="img/link.png" alt="link">
<h4>احصل على رخصتك عبر منصة الأعمال</h4>
</div>
<i class="fas fa-angle-down"></i>
</div>
<div class="linkInfo toggle">
<a href="${li}" target="_blank">${lt}</a>
</div>
</div>`;
}<div class="container">
<div class="title">
</div>
<div class="right">
<div class="subTitle">
</div>
</div>
<div class="left"></div>
</div>您的代码不是有效的语法。
第一步是在一个数组中，使用"=">
[step1 = {}, step2 = {}]
您需要重新构造它。也许可以添加一个stepId字段，以便将其与其他类型混合。
[{stepId:'step1'},{stepId:'step2'},{not:'astep'}]
database.forEach(sector => {
const steps = sector.touristActivities.filter(activity=>activity.stepId !== undefined)
// Now use your `steps` to generate your sections.
steps.forEach(step=>{
const ele = document.createElement('section')
ele.className = step.stepId
ele.innerText = step.subTitle
// and so on
})
})
您可以使用Array.reduce((方法按索引对活动进行分组：
let data = getDatabase();
// collect activities
let activities = [];
for (let sect of data) {
activities.push(sect.touristActivities);
}
// group by index
let groupedActivities = activities.reduce((groups, activities, index) => {
activities.forEach((step, i) => {
groups[i] = groups[i] || [];
groups[i].push(step);
});
return groups;
}, []);
// display in html <section>
groupedActivities.forEach((group, index) => {
let sec = document.createElement('section');
sec.innerHTML += `<hr><strong>Section step ${index + 1}</strong><br>`;
for (let act of group)
sec.innerHTML += `${act.subTitle}<br>`;
document.body.appendChild(sec);
});
function getDatabase() {
return [{
sectorId: 1,
sectorName: "sector Name",
licenseNum: ["7960", "7961"],
touristActivities: [
stepOne = {
subTitle: "sector1 stepOne",
description: "1 dsescription ",
},
]
},
{
sectorId: 2,
sectorName: "sector Name",
licenseNum: ["7960", "7961"],
touristActivities: [
stepOne = {
subTitle: "sector2 stepOne",
description: "sector2 dsescription",
},
stepTwo = {
subTitle: "sector2 stepTwo",
description: "sector2 dsescription",
},
]
},
{
sectorId: 3,
sectorName: "sector Name",
licenseNum: ["7960", "7961"],
touristActivities: [
stepOne = {
subTitle: "sector3 stepOne",
description: "sector3 dsescription",
},
stepTwo = {
subTitle: "sector3 stepTwo",
description: "sector3 dsescription",
},
stepThree = {
subTitle: "sector3 stepThree",
description: "sector3 dsescription",
}
]
},
];
}如果您正在对对象结构进行大量复杂的查询，那么您可以使用jsonpath库。
<script src="https://cdn.jsdelivr.net/npm/jsonpath@1.1.1/jsonpath.min.js"></script>
<script>
let activities = jsonpath.query(database, '$..touristActivities');
</script>