So I have an app which uses Google Books API, and I have a div with image poster. Thus i need to get image id from image url in Google API to change posters of books in these divs.
Javascript code:
const IMG_URL = "http://books.google.com/books/content?id="; //after "id=" I need to insert a particular image id
Function for showing books:
function showBooks(data){
data.forEach(book => {
const {title, authors, description} = book;
const bookEl = document.createElement('div');
bookEl.classList.add('book');
bookEl.innerHTML = `
<div class="border"></div>
<img src="${IMG_URL + }"> //here I should concatenate url with book id
<div class="book_info">
<h3>Book title</h3>
<p>Author</p>
</div>
<div class="overview">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi augue, ultricies vitae nisi vitae,
suscipit elementum risus. Suspendisse vitae porta tellus, a finibus lorem. </p>
</div>
`
});
}
What it looks like in the API:
"thumbnail": "http://books.google.com/books/content?id=WvfgAAAAMAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api"
I would construct a URL object and then extract the id parameter
const url = new URL(yourImageUrl)
const id = url.searchParams.get("id")
Read more about the URL class here: https://developer.mozilla.org/de/docs/Web/API/URL