Javascript 在多层JSON中创建两层深的值列表

首先，我要说的是，我对Javascript一般来说是比较陌生的。也就是说，我甚至可能没有提出正确的问题，但我希望我能提供足够的信息，让比我更聪明的人来帮助我摆脱困境。提前谢谢你

我有一个API，我从中提取信息并在DOM上提供它。我只需要其中一个值的列表。我遇到的问题是，我似乎无法正确地确定值的目标，因为它在JSON中有好几层

理想情况下，我将使用这个替换并通过定位ID在页面上附加一个现有列表。我可以让它工作，但在这个代码示例中，我只能获得所有81个索引。如果我将[0]添加到onetObj，那么我将得到该索引中的名称列表。对于列表中的所有索引，我只需要其中一个名称的值。特别是每个索引中的备选标题

按照他们进行身份验证设置的方式，如果不违反CORS，您将无法直接运行我的代码。所以我包括了我正在使用的代码以及我正在使用的数组的副本。我希望这有帮助

编辑

这里有一个关于我最终目标的问题。希望这会有帮助

我正在使用客户提供的CMS信息建立一个职业匹配网站，并从劳工部API获取额外数据。他们的数据库中有1100多个职业，37个附加信息数据库供我们选择

在这个具体的例子中，我有一个页面，上面有职业的主标题和客户CMS中的一篇文章。我正试图为这一职业添加一份备选头衔列表。备选标题来自API

当我唯一需要的是每一行的替代标题（Alternate_title）列表时，我似乎只能在DOM上显示一个行号列表

我的剧本：

<script>
  
  var myHeaders = new Headers();
  myHeaders.append("Accept", "application/json");

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  async function start(){
    const response = await fetch("https://services.onetcenter.org/v1.9/ws/database/rows/alternate_titles?filter=onetsoc_code.eq.17-2051.00&end=9999&client=careerpuppy", requestOptions)
    const data = await response.json()
    console.log(data)
    createOnetObj(data.row)
  }

   start()

  function createOnetObj(onetObj) {
    document.getElementById("alttitlelist").innerHTML = `
    ${Object.keys(onetObj).map(function (altTitle) {
      return `<li>${altTitle}</li>`
     }).join('')}
    `
   }

</script>

---

我不清楚你的目标，但这不是你需要的

您使用data.row，这是一个

如果要对值进行迭代，请使用以下方法：

data.row.forEach( (value, index) => {
    console.log(index, ':', value.alternate_title);
});

const alternateTitles = data.row.map( value => value.alternate_title);

如果你需要独身

版本 把东西放在一起，比如

<script>
  
  async function updateListItems(){
    const url = "https://services.onetcenter.org/v1.9/ws/database/rows/alternate_titles?filter=onetsoc_code.eq.17-2051.00&end=9999&client=careerpuppy";
    const response = await fetch(url, {
      method: 'GET',
      headers: { "Accept" : "application/json"},
      redirect: 'follow'
    });
    const data = await response.json();
    

    const list = document.getElementById("alttitlelist");
    const listItems = data.row.map( value => `<li>${value.alternate_title}</li>`).join('');
    list.innerHTML = listItems;
  }

  updateListItems();

</script>

异步函数updateListItems（）{
常量url=”https://services.onetcenter.org/v1.9/ws/database/rows/alternate_titles?filter=onetsoc_code.eq.17-2051.00&end=9999&client=careerpupy”；
const response=等待获取（url{
方法：“GET”，
标题：{“接受”：“应用程序/json”}，
重定向：“跟随”
});
const data=wait response.json（）；
const list=document.getElementById（“alttitlelist”）；
const listItems=data.row.map（value=>`
${value.alternate_title}
`）；
list.innerHTML=listItems；
}
updateListItems（）；

---

“唯一性”就是它的意思，删除重复的项目。

谢谢您的帮助！我将代码添加到start（）函数中，它将代码完全按照我的需要记录在控制台中。我确实删除了索引和冒号，因为我只需要标题。我仍然面临的问题是如何正确地为DOM服务。我在帖子中更新了最终目标。希望这会有所帮助。正如我所说，Javascript对我来说是新的。我整天都很习惯HTML和CSS。请随意更正我的语法错误。我需要它！还有，什么是单一性？每次搜索都指向一个传销。我无法想象你的意思是什么。谢谢你在代码和术语上的澄清。我真的很感激！

<script>
  
  async function updateListItems(){
    const url = "https://services.onetcenter.org/v1.9/ws/database/rows/alternate_titles?filter=onetsoc_code.eq.17-2051.00&end=9999&client=careerpuppy";
    const response = await fetch(url, {
      method: 'GET',
      headers: { "Accept" : "application/json"},
      redirect: 'follow'
    });
    const data = await response.json();
    

    const list = document.getElementById("alttitlelist");
    const listItems = data.row.map( value => `<li>${value.alternate_title}</li>`).join('');
    list.innerHTML = listItems;
  }

  updateListItems();

</script>