如何从外部JS文件中访问嵌套数组中的项目？

Question

我正在自己的网站上充当简历和投资组合，这是一种显示我的网页设计技能的有趣方式。它的目的是使用JavaScript通过用作数据库的数组来使用我的每个作业，关键技能，资格等来填充网页。

添加了两个脚本标签

<script type="module" src="js/database_career.js" defer></script>
<script type="module" src="js/script.js" defer></script>

在我的头部部分中，我在database_career.js文件中

function Job(title,company,location,date,summary,details) {
  this.title = title;
  this.company = company;
  this.location = location;
  this.date = date;
  this.summary = summary;
  this.details = details;
}

，我创建了一个具有作业详细信息的类构造函数作为其对象属性，并且在同一文件中，这是我想要的所有作业的（示例）填充我的网页。

const JOBS = [
  new Job(
    "Job Title",
    "Company",
    "Location",
    "Month 20XX ~ Now",
    "Insert Job Summary Here",
    ["Bullet Point for notable task or accomplishment 1",
    "Bullet Point for notable task or accomplishment 2",
    "Bullet Point for notable task or accomplishment 3"]
  ),
  new Job()
];

现在，这是我到目前为止在主脚本文件中编码的内容。

    import JOBS from "./database_career.js";
        
            // Populate the Career Section
            const myCareer = document.querySelector("#work");
              const jobSection = document.createElement("div");
                jobSection.classList.add("content-wrap", "clearfix");
            
                const jobsHeading = document.createElement("h2");
                const jobsHeading_content = `<i class="fas fa-briefcase" aria-hidden="true"></i>Work Experience`;
                jobsHeading.innerHTML = jobsHeading_content;
                jobSection.append(jobsHeading);
        
        for (let i=0;i<JOBS.length;i++) {
                const jobEntry = document.createElement("div");
                  jobEntry.classList.add("entry");
        
                const jobContent_narrow = `
                  <div class="col-narrow">
                    <h3>${JOBS[i].title}</h3>
                    <p class="uppercase">${JOBS[i].company}, ${JOBS[i].location}</p>
                    <p>${JOBS[i].date}</p>
                  </div>`;
        
        const jobContent_wide = `
                  <div class="col-wide description">
                  <p>${JOBS[i].summary}</p>`;
        
// Here's where I'm stuck. 
// I managed to get the rest of the job details, shown above, displaying correctly.
// I want to show the extra details in an unordered list but I was unable to access
// any individual items in the details array

// I could only show the full array itself but
// manipulating the array itself seems to be impossible
// I keep getting the following error
// script.js:49 Uncaught TypeError: Cannot read properties of undefined (reading 'length') at script.js:49:42

        const jobDetails = document.createElement("ul");
          for (let e=0;e<JOBS[i].details.length;e++) {
            let listItem = document.createElement("li");
            let item = `<li>${JOBS[i].details[e]}</li>`;
            jobDetails.append(item);
          }
        
                const jobDetails_end = `
                </div>`;
        
                jobEntry.innerHTML = jobContent_narrow + jobContent_wide + jobDetails_end;
                jobSection.append(jobEntry);
              }
        
            myCareer.append(jobSection);

如果您错过了评论，我正在尝试将每个作业中包含的详细信息数组中的项目添加为无序列表中的项目符号，但无法直接访问它们。相反，我可以显示完整的阵列本身。

任何帮助和建议都将不胜感激，如果需要，我将提供任何进一步的信息。

谢谢。

Answer 1

我看到您的函数将详细信息初始化为 this.details，因此如果您不传递该参数，它可能会被初始化为未定义。

你确定每个工作都有详细信息吗？即使是空数组列表？

抛出的错误告诉您他正在尝试获取第一个循环中每个作业的详细信息的长度，但未定义，并且调用 undefined.length 会抛出该异常

Answer 2

我认为该问题是由 database_career.js 上的以下行引起的：

  ),
  new Job() // <---
];

您在其中实例化了一个新作业，并将 details 设置为 undefined。
因此，以下行：

for (let e=0;e<JOBS[i].details.length;e++) 

调用不安全，因为 .length 不存在于 undefined 字段中。

---

我建议将此函数更改为类似以下内容：

function Job({ title, company, location, date, summary, details = [] } = {}) {
// ...

这使用 解构赋值 和 默认参数（查看文档以了解更多信息它们并查看支持哪些浏览器）并且允许有类似的内容：

const JOBS = [
  new Job({
    title: "Job title",
    company: "Job company",
    // ...
    details: ["1", "2"]
  }),
  new Job(),
];

其中 job.details 将始终初始化为空数组，因此可以安全地循环而无需显式检查首先是未定义。

我建议的另一件事是重构 js/script.js 并创建一些小的可重用函数，例如

function render() {
  // ..
  for (let i=0; i< JOBS.length;i++ ) {
    renderJob(JOBS[i]);
  }
}

function renderJob(job) {
  // ...
  renderJobDetails(job.details);
}

function renderJobDetails(details) {
 // ...
}

render();

提高可读性。

如果您再次遇到困难，您可能需要看看这篇文章：

https://javascript.info/debugging- chrome

了解如何使用浏览器调试器工具并更好地理解为什么您的代码不能按预期工作。

Answer 3

嵌套模板文字

<ul>${job.details.map(detail => `<li>${detail}</li>`).join("")}</ul>

您可以像这样

document.querySelector("#work").innerHTML = `
  <div class="content-wrap clearfix">
    <h2><i class="fas fa-briefcase" aria-hidden="true"></i>Work Experience</h2>
  ${JOBS.map(job => `
    <div class="entry">
      <div class="col-narrow">
        <h3>${job.title}</h3>
        <p class="uppercase">${job.company}, ${job.location}</p>
        <p>${job.date}</p>
      </div><div class="col-wide description">
        <p>${job.summary}</p>
        <ul>${job.details.map(detail => `<li>${detail}</li>`).join("")}</ul>
      </div>
    </div>`).join("")}
  </div>`

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<div id="work"></div>

<script>
function Job(title, company, location, date, summary, details) {
  this.title = title;
  this.company = company;
  this.location = location;
  this.date = date;
  this.summary = summary;
  this.details = details;
}


const JOBS = [
  new Job(
    "Job Title",
    "Company",
    "Location",
    "Month 20XX ~ Now",
    "Insert Job Summary Here", ["Bullet Point for notable task or accomplishment 1",
      "Bullet Point for notable task or accomplishment 2",
      "Bullet Point for notable task or accomplishment 3"
    ]
  ),
  new Job(
    "Job Title",
    "Company",
    "Location",
    "Month 20XX ~ Now",
    "Insert Job Summary Here", ["Bullet Point for notable task or accomplishment 1",
      "Bullet Point for notable task or accomplishment 2",
      "Bullet Point for notable task or accomplishment 3"
    ]
  ),

];
</script>