Question
Answer and Explanation
Fetching data using GET parameters involves sending data to a server within the URL itself. This is commonly used for requesting specific information or filtering results. Here’s how you can do it using JavaScript, focusing on the Fetch API.
1. Constructing the URL:
- Start by building the URL with your base endpoint followed by a question mark (?). Add parameters as key-value pairs, separated by ampersands (&).
- Example: https://api.example.com/items?category=books&author=Jane+Doe
2. Using the Fetch API:
- The Fetch API is a modern way to make network requests in JavaScript. You simply provide the URL, including any GET parameters.
3. Example Code:
const url = "https://api.example.com/items?category=books&author=Jane+Doe";
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
// Handle the data here
console.log("Data received:", data);
})
.catch(error => {
console.error("Fetch error:", error);
});
4. Explanation:
- The fetch() function takes the URL as an argument.
- The first .then() block checks if the response is okay (HTTP status 200-299). If not, it throws an error.
- response.json() extracts the JSON data from the response body.
- The second .then() block handles the JSON data once received.
- The .catch() block handles any errors that occur during the fetch process.
5. Dynamic Parameters:
- To dynamically construct the URL with parameters, you can build it using template literals:
const category = "electronics";
const brand = "Acme";
const dynamicUrl = `https://api.example.com/products?category=${category}&brand=${brand}`;
fetch(dynamicUrl)
.then(response => response.json())
.then(data => console.log(data));
6. URL Encoding:
- Ensure you URL-encode the values of your parameters if they contain special characters. Use the encodeURIComponent() function to do this:
const searchTerm = "Laptop & Charger";
const encodedSearch = encodeURIComponent(searchTerm);
const urlWithEncodedParam = `https://api.example.com/search?q=${encodedSearch}`;
By using these techniques, you can effectively fetch data using GET parameters in JavaScript, making your web applications interactive and responsive to user input.