I’m learning how to code with API data, and I’m having difficulty targeting the JSON data from a given endpoint. While the data does return results, I’m struggling to access it correctly and display the “name” and “image_url” fields on the page.
async function fetchData(){
try {
const term = document.getElementById("term").value.toLowerCase();
const response = await fetch (`https://api.vendor.com/v9/lmnop/providers?context=redacted&clinical_keywords=${term}&access_token=abcdefg1234567`)
if(!response.ok){
throw new Error("It is not working");
}
const data = await response.json();
const docs = data._result;
const docContain = document.getElementById('docContain')
docs.forEach(doctorData => {
const doc = doctorData.doc;
const name = doc.name.first_last;
const imageUrl = doc.image_url;
const docElement = document.createElement('div');
docElement.innerHTML = `
<h2>${name}</h2>
<img src="${imageUrl}" alt="${name}">
`;
docContain.appendChild(docElement);
});
}
catch(error){
console.error('Here's what went wrong:', error);
}
}
JSON Data Example
{
"_metadata": {...
},
"_result": [
{
"availability": {...
},
"customer": "broadway-health-demo",
"locations": [...
],
"match": {...
},
"provider": {
"accepting_new_patients": true,
"access_program_status": "Direct Schedule",
"affiliation": [],
"age_groups_seen": [...
],
"always_available_provider": false,
"appointment_ehr_purposes": [...
],
"availability_last_updated": null,
"board_certifications": [
{
"board_name": "American Board of Allergy and Immunology",
"board_specialty": "BC0000025",
"certification_type": "board",
"certifying_board": "BC0000001",
"rank": 1,
"specialty_name": "Allergy and Immunology",
"year_certified": 2007
}
],
"book_online_url": "https://stg-broadway-health-demo.provider-match.com/book/670015",
"clinical_contact": null,
"clinical_keywords": {
"promoted": [
{
"cui": "C3663103",
"name": "mast cell activation syndrome"
}
],
"searchable": [
{
"cui": "C3665851",
"name": "allergic disorders"
},
...
]
},
"clinical_trials": [],
"contacts": [
{
"contact_type": "phone",
"extension": null,
"subtype": null,
"value": "216-555-4321"
},
...
],
"current_status": null,
"default_timezone": "US/Eastern",
"degrees": [
{
"name": "MD",
"source": "MD",
"source_url": null
}
],
"direct_book_capable": false,
"direct_book_pmac": true,
"direct_book_pmc": false,
"entity_type": null,
"external_id": "670015",
"external_systems": [
{
"provider_id": "670015",
"source_system": "ksched",
"system_type": "ksched"
}
],
"gender": "Male",
"graduate_education": [],
"grants": [],
"gx": {
"max_age": null,
"min_age": null
},
"hospital_affiliations": [
"Broadway Memorial Hospital"
],
"id": 670015,
"image_url": "https://kyruus-app-static.kyruus.com/providermatch/broadway-health-demo/photos/200/pierce-antonio-6932912268.jpg?1520012496329",
"insurance_accepted": [...
],
"is_primary_care": false,
"is_specialty_care": true,
"ksched_appointment_request_email": null,
"languages": [...
],
"legal": [],
"license": [],
"manually_created": null,
"media_mentions": [],
"metadata": {...
},
"multi_resource_scheduling": null,
"name": {
"first": "Antonio",
"first_last": "Antonio Pierce",
"full": "Antonio B Pierce",
"last": "Pierce",
"middle": "B",
"preferred": null
},
"network_affiliations": [
{
"name": "Broadway Memorial Hospital",
"type": "Hospital"
},
...
],
"networks": [],
"notes": null,
"npi": "6932912268",
"pmc_db_only_provider": null,
"practice_groups": [
{
"name": "Broadway Medical Group"
}
],
"professional_statement": "...",
"provider_is_employed": false,
"provider_type": "Physician",
"provider_videos": [...
],
"publications": [],
"rating": {
"average": 4.798396,
"count": 95
},
"ratings": {},
"request_appointment_url": "https://www.kyruus.com/request-a-demo-of-kyruus-providermatch",
"reviews": {...
},
"sched_interval_duration_days": null,
"sched_interval_same_day_minute_delay": null,
"sched_interval_start_days": null,
"sort_preferences": {},
"specialties": [
{
"name": "Endocrinology",
"subspecialties": [
{
"eui": "E0000032",
"name": "Diabetes"
}
]
}
],
"status_transitions": null,
"telehealth": false,
"telehealth_badge": null,
"training": [
{
"city": null,
"country": null,
"degree": "MD",
"field_of_study": null,
"graduation_date": null,
"graduation_year": "2001",
"name": " Jefferson Medical College",
"rank": 1,
"state": null,
"street1": null,
"street2": null,
"type": "Medical School",
"zip": null
},
...
],
"video_url": "https://youtu.be/01cZgUhSZcw",
"virtual_care_url": null,
"years_in_practice": 14
},
"provider_id": 1430310,
"sort": [
...
]
},
...
]
"facets": [],
"interpretation": [],
"messages": {...
},
"suggestions": {},
"warnings": []
}
Here is the error I get in console:
TypeError: Cannot read properties of undefined (reading ‘name’)