在多级 JSON 中创建几级深的值列表

Question

我会以我对 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>

这是我通过此请求获得的 JSON 中 81 的两个索引：

end: 81
filter: ["onetsoc_code.eq.17-2051.00"]
info: "https://services.onetcenter.org/v1.9/ws/database/info/alternate_titles"
row: Array(81)
0: {onetsoc_code: "17-2051.00", title: "Civil Engineers", alternate_title: "Airport Engineer", short_title: null, sources: "08"}
1: {onetsoc_code: "17-2051.00", title: "Civil Engineers", alternate_title: "Architectural Engineer", short_title: null, sources: "08"} 

Answer 1

我不清楚你的目标，但Object.keys不是你需要的。

您使用 data.row，这是一个Array 。

如果要迭代值，请使用以下内容：

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>

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