javascript - JSON数组在DOM中显示未定义和jquery中的数据

Question

我对 JS 和 jquery 非常陌生，正如你在我的问题中看到的那样。但是，我试图在 HTML 页面中加载一些简单的 JSON 日期。我已经在一些项目中做过几次这样的操作，但是这个显示了多个数据，其中一些数据是未定义的。

JSON 数据:

{"employment": [

    {
        "date": "June 16, 2014 - Present"
    },
    {
        "company": "SAP/Concur Technologies Inc."
    }

]}

结果:

June 16, 2014 - Present
undefined
undefined
SAP/Concur Technologies Inc.
undefined
undefined
undefined
undefined
undefined
undefined
undefined
undefined

还请告知我正在使用 Bootstrap 。我不确定这是否会影响我的 jquery。我尝试控制台记录它，它显示了我的正确数据，但由于某种原因，HTML 显示了很多未定义的内容。我尝试检查调试器，但似乎找不到未定义的原因。

$.getJSON("data/data.json", (data)=>{
     loadEmploymentData(data.employment);
    console.log(data.employment);
});

function loadEmploymentData(employmentArray){

    employmentArray.forEach((employment)=>{
        $("#employment").append(`<ul><li>${employment.date}</li>
        <li>${employment.company}</li></ul>`);

                });
};

我真的很感谢你的帮助。

Answer 1

将每个职位的结构更改为一个包含多个属性的对象

var data = {
  "employment": [{
      "date": "June 16, 2014 - Present",
      "company": "SAP/Concur Technologies Inc."
    },
    {
      "date": "Jan 16, 1999 - Aug 7, 2012",
      "company": "Some Co."
    }
  ]
}

// no changes were made to this function
function loadEmploymentData(employmentArray) {
  employmentArray.forEach((employment) => {
    $("#employment").append(`<ul><li>${employment.date}</li>
        <li>${employment.company}</li></ul>`);
  });
};
// call function since not doing ajax in this demo
loadEmploymentData(data.employment)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="employment"></div>