Fetch GitHub API Data Hierarchy

human (Nov 10, 2024, 06:50 PM)

Write me an async JavaScript function which starts by doing a fetch() to https://api.github.com/repos/mdn/browser-compat-data/contents and then looping through the returned array of objects looking for the one with a "name" key set to "api" - on that object its should look for the _links.git property which is a URL

It should fetch that URL, which return JSON with a "tree" key - it should then return that array to the caller

assistant (Nov 10, 2024, 06:50 PM)

I'll help you write an async JavaScript function that handles the GitHub API requests.

create GitHub API Data Fetcher

async function fetchGitHubApiData() {
  try {
    // First API call to get repository contents
    const contentsResponse = await fetch('https://api.github.com/repos/mdn/browser-compat-data/contents');
    
    if (!contentsResponse.ok) {
      throw new Error(`HTTP error! status: ${contentsResponse.status}`);
    }
    
    const contentsData = await contentsResponse.json();
    
    // Find the object with name: "api"
    const apiObject = contentsData.find(item => item.name === "api");
    
    if (!apiObject) {
      throw new Error('Could not find object with name "api"');
    }
    
    // Extract the git URL from _links
    const gitUrl = apiObject._links?.git;
    
    if (!gitUrl) {
      throw new Error('Git URL not found in _links');
    }
    
    // Second API call to fetch the git data
    const gitResponse = await fetch(gitUrl);
    
    if (!gitResponse.ok) {
      throw new Error(`HTTP error! status: ${gitResponse.status}`);
    }
    
    const gitData = await gitResponse.json();
    
    // Return the tree array from the git data
    if (!gitData.tree) {
      throw new Error('Tree data not found in git response');
    }
    
    return gitData.tree;
    
  } catch (error) {
    console.error('Error fetching GitHub data:', error);
    throw error;
  }
}

// Example usage:
// try {
//   const treeData = await fetchGitHubApiData();
//   console.log(treeData);
// } catch (error) {
//   console.error('Failed to fetch data:', error);
// }

I've created a function that:

1. Makes an initial fetch to the specified GitHub API endpoint
2. Finds the object with name "api" in the returned array
3. Extracts the git URL from the _links property
4. Fetches that URL and returns the tree array from the response

The function includes:

• Error handling for failed API calls
• Type checking to ensure the expected data exists
• Proper async/await syntax
• Optional chaining for safe property access
• Comments explaining the process
• Example usage code (commented out)

Would you like me to explain any part of the implementation in more detail?