FAQ: Requests I - XHR GET Requests IV


#1

This community-built FAQ covers the “XHR GET Requests IV” exercise from the lesson “Requests I”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Introduction To JavaScript

FAQs on the exercise XHR GET Requests IV

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!


#2

How do I use AJAX/JSON to manipulate the webpage

// Information to reach API
const url = 'https://api.datamuse.com/words?’;
const queryParams = ‘rel_jjb=’;
const additionalParams = ‘&topics=’;

// Selecting page elements
const inputField = document.querySelector(’#input’);
const topicField = document.querySelector(’#topic’);
const submit = document.querySelector(’#submit’);
const responseField = document.querySelector(’#responseField’);

// AJAX function
const getSuggestions = () => {
const wordQuery = inputField.value;
const topicQuery = topicField.value;
const endpoint = ${url}${queryParams}${wordQuery}${additionalParams}${topicQuery};

const xhr = new XMLHttpRequest();
xhr.responseType = ‘json’;

xhr.onreadystatechange = () => {
if (xhr.readyState === XMLHttpRequest.DONE) {
renderResponse(xhr.response);
}
}

xhr.open(‘GET’, endpoint);
xhr.send();
}

// Clear previous results and display results to webpage
const displaySuggestions = (event) => {
event.preventDefault();
while(responseField.firstChild){
responseField.removeChild(responseField.firstChild);
}
getSuggestions();
}

submit.addEventListener(‘click’, displaySuggestions);


I didn’t have a problem writing this code through the interactive lesson, but I’m struggling to completely understand it.
I’ve watched a few online tutorials running through AJAX/JSON so I understand where the new objects and methods are coming from and how they work.
However, I haven’t been able to get my code to affect the website in the lesson, even though I’m not getting any errors.

I’ve kept trying to place a word inside my “const inputField = document.querySelector(’#input’);” #input value to get an affect on the webpage, and nothing shows up.

If you’ve gotten this exercise to work, could you explain where you put your input value and what you manipulated?

I’m sure I’m making this more complicated than it is, but, when I run this exact code, no matter what I type into the website beside the lesson, nothing shows up.

So am I missing an input value somewhere? And if so where does it go?

Thanks in advance for any response.