We Keep Coding

How to fetch data properly for this API? (array)

console.log screenshot
Hi, I am using "fetch" method with API for my website, and this API shows book information, if books include the input title.
Screenshot attached is console.log result when typing an example book title.
I'd like to get every title info of each array, could anyone can help me on this?
Especially I am not sure what is the proper line for this.
.then((data) => {document.getElementById("bookinfo").innerHTML=
data['documents'.authors];
Entire script for fetch is below.
<script>
function getBook(){
let bookvalue=document.getElementById("book").value;
fetch('https://dapi.kakao.com/v3/search/book?target=title&query=' + bookvalue, {
headers: {
Authorization: "KakaoAK TokenID"
}
})
.then((response) => response.json())
.then((data) => {document.getElementById("bookinfo").innerHTML=
data['documents'.authors];
});
}
</script>

You're not calling the array index correctly, data['documents'.authors] should be data.documents[0].authors to get the author of the first item and data.documents[1].authors to get the second, etc...
What do you intend to do with the titles?
EDIT: Fixed it for easier use (I think this is what you want)
.then(data => data.documents.map(book => book.title)).then(titles => document.getElementById("bookinfo").innerHTML = titles.join(", "));
Otherwise create an array
const titles = [];
push into array
.then(data => data.documents.map(book => titles.push(book.title))
But you might have issues with this and get empty array since the promise might still be pending

How do I embed an API call in my index.html file using JavaScript?

I am trying to work out how to embed an API call response into my index.html file in order to update a website counter using JavaScript.
I have tried multiple blogs and YouTube tutorials but as I'm not experienced with JS I am really struggling.
Here is my API:
https://b9hsa93hif.execute-api.eu-west-2.amazonaws.com/Prod/hello/
Here is my attempted script.js file:
const countEl = document.getElementById('count');
updateVisitCount();
function updateVisitCount() {
fetch('https://b9hsa93hif.execute-api.eu-west-2.amazonaws.com/Prod/hello/')
.then(res => res.json())
.then(res => {
countEl.innerHTML = res.value;
})
}
As my API updates automatically each time the page is refreshed, I presume I do not need the JavaScript function itself to count - but I don't know how to rewrite it correctly.
Here is the snippet from my attempted index.html file:
</div>
<p>This page was viewed</p>
<h1 id="count"></h1>
<p>times</p>
I would like my static webpage to display This page was viewed [return result of API call] times.
Thanks in advance!
--UPDATE--
I have managed to resolve this, thanks for the contributions #Barmar as they steered me in the right direction, and updating the res.value to res.clicks was an essential step.
However, the main issue was the fact that my API is linked to API Gateway and a Lambda function, and I was missing some key code in there. I realised this when trying to enable CORS on the API Gateway resource, and in searching for help I found this SO thread. One of the comments in there had the correct code to include in the Lambda function (I've marked it between >>> <<<):
return {
'statusCode': 200,
>>>'headers': {
"Access-Control-Allow-Origin": "*"
},<<<
'body': json.dumps({'clicks': int(ddbResponse['Attributes']['clicks'])})
When I updated that in my Lambda function, and refreshed the website based on my updated index.html file, it worked correctly.
Thanks again everyone!

you have to change code to
fetch('https://b9hsa93hif.execute-api.eu-west-2.amazonaws.com/Prod/hello')
.then(response => response.json())
.then(res => {
// do something
document.getElementById("test").innerHTML = res.clicks; //you used of clicks parameter
//do something
});
<h1 id="test"></h1>

How to use array items as parameter for API call

I am currently trying to log out the names and ID of a various items for a video game using an array which holds the ID of each item.
Currently I have the following.
const URL =
"http://services.runescape.com/m=itemdb_oldschool/api/catalogue/detail.json?item=";
const items = ["4151", "2"];
items.map(item => {
fetch(`${URL}${item}`)
.then(data => data.json())
.then(({ item: { id, name } }) => console.log(`${id}: + ${name}`));
});
I should be getting 4151: Abyssal Whip as a format for each item, but it isnt working. I have done this in the past using a cryptocurrency api, but I cant get it to work here, and I am not sure where I am going wrong.
Thanks for the help in advance.

Some more detail would help. If you open dev tools and look at console output when hitting the API, you might be getting an error... maybe a Mixed-Content error? The runescape API is returning from an HTTP connection. If you are requesting from an HTTPS connection, it will not allow the resource to be delivered. Otherwise, your code should run (but the +) won't be necessary because you're using template literals.

I am sure its a typical CORS policy error. Here's how I managed to fetch the data. The heroku API enables cross-origin requests to anywhere.
const items = ["4151", "2"];
const proxyUrl = "https://cors-anywhere.herokuapp.com/",
targetUrl =
"http://services.runescape.com/m=itemdb_oldschool/api/catalogue/detail.json?item=";
items.map((item) => {
fetch(proxyUrl + targetUrl + item)
.then((data) => data.json())
.then(({ item: { id, name } }) => console.log(`${id}: + ${name}`));
});

How to limit the amount of data returned from a JSON file using fetch?

I have this fetch statement that returns 19 building names, but I only want 10; the following is what I attempted, but I still get 19 building names.
fetchBuildings(energyProgramId) {
fetch(`http://localhost:1001/api/energyprograms/${energyProgramId}/buildings/?results=10`)
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
buildings: json,
})
});
}
Is there something extra I need to add?

Here is an example:
1.fetch('http://jsonplaceholder.typicode.com/posts/')
The above URL gives array of objects with 100 elements because it originally is an array of 100 elements.
2.fetch('http://jsonplaceholder.typicode.com/posts/?_limit=10')
This URL gives array of objects with 10 elements.
Notice the difference?
I only did this : ?_limit=10 ----> Add any number in place of 10 and hopefully you will get desired results.

As the other answer already points out the best/most normal solution would be to change on the backend how the API returns data. Typically REST API's support query parameters such as limit and start or page and resultsPerPage.
If this is not available - e.g. when you're fetching an external resource - an alternative which is often supported by static file servers and sometimes by API's is the Range header which allows you to retrieve only a specific byte range of the resource (do note, in the case that an API supports this it will still load the entire resource on the server, but it will not transmit the entire resource). An example with fetch would look like
fetch('', { headers: { range: 'bytes=0-1000'} })
When doing this on XML or JSON resources it can be somewhat difficult to work with, but with for example CSV files it's ideal.

No different from fetch to XHR or axios or anything else. actually, no different from react or angular or vue or anything else.
This is an API that backend developers wrote it and it is based on REST API, so when you call it as GET or POST and anything else you just fetch the JSON that the backend developers designed it. BUT
There is a new technology that name is GraphQL. you can call API and then you just fetch the JSON what you want. Also, it must be implemented in backend but it is possible.

It's not closely bound up with React. If you need less data you must reduce data before set the state.
const reducedBuildings = [];
fetch(`http://localhost:1001/api/energyprograms/${energyProgramId}/buildings/?results=10`)
.then(res => res.json())
.then(json => {
json.forEach(building => {
if (reducedBuildings.length < 10) {
reducedBuildings.push(building);
}
});
this.setState({
isLoaded: true,
buildings: reducedBuildings,
})
});

Getting response data out of Fetch blob from Wikipedia api

I'm trying to use Wikipedia's api with fetch.
const endpoint = 'https://en.wikipedia.org/w/api.php?
action=query&format=json&origin=*&titles=Albert%20Einstein'
fetch(endpoint)
.then(blob => blob.json())
.then(data => console.log(data))
RETURNS
I'm not sure how to drill down in this, due to that 736. I assume there is nothing there? What do these results mean?
I did these loops to see if they allowed me something I could not get by clicking in the console. It's the same as fetch call above so not really useful. Just wanted to show that I tried something at least (downvote control).
fetch(endpoint)
.then(blob => blob.json())
.then((data) => {
for(var i in data){
//returns batch complete ,
//& query
for(var j in data.query){
//returns pages
for(var k in data.query.pages){
//returns the string 736
}
}
}
})
Does nothing more than clicking the console results above.

Use formatversion=2 for a slightly more comfortable format (where data.query.pages is an array).
Alternatively, you could iterate the object with something like
var pages = data.query.pages;
for (pageId in pages) {
if (pages.hasOwnProperty(pageId)) {
console.log(pages[pageId]);
}
}
In modern browsers you can also use Object.values() to get the properties of the object in an array.