Creating a list of Values that are a couple levels deep in a Multi-Level JSON

Question

I'll lead with the fact that I'm relatively new to Javascript in general. That said, I am likely not even asking the right question but I am hopeful that I'll give enough info that someone smarter in this than I will help un-screw me. Thank you in advance!

I have an API I'm pulling info from and serving it on the DOM. I only need a list of one of the values. The problem I'm having is that I can't seem to target the value correctly because it is several layers deep in the JSON.

Ideally I'll have this replace and append an existing list on the page by targeting the ID. I can get that to work, but in this code example I can only get all 81 indexes. If I add [0] to the onetObj then I get a list of the names in that index. What I want is the value of one of those names only, for all of the indexes, in a list. Specifically the Alternate Titles in each index.

The way they have auth setup you won't be able to run my code directly without a CORS violation. So I'm including the code I'm using as well as a copy of the array I'm working with. I hope that helps.

EDIT

There was a question about my end goal here. Hopefully this will help!

I am building a career matching site using a CMS of info from my client and pulling in extra data from a Department of Labor API. There are over 1100 careers in their database and 37 databases of additional information for us to pick and choose from.

In this specific example I have a page that has the main title of the career and a writeup on it from the client's CMS. I'm trying to add a list of Alternate Titles for that career. The Alternate Titles come from the API.

All I can seem to get to show on the DOM is a list of the Row numbers when the only thing I need is a list of the Alternate Titles (alternate_title) from each row.

My script:

<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>

Here's two indexes from the 81 in the JSON I'm getting with this request:

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

Your objectives are unclear to me but Object.keys is not what you need.

You work with data.row, that's an Array .

If you want to iterate over values, use something like:

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

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

If you need unicity, the solution is here

Edition Just put things together, something like

<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>

And unicity is just what it means, removing duplicate items.