How to fetch image from api?

Question

I've written this script in JavaScript and am still a beginner. I want to fetch the image URL from the API in the field called square_medium then replace "i.pximg.net" with "i.pixiv.cat" in the image URL and finally limit it to display only the first 6 images. My javascript code isn't working so can anyone help fix my mistakes?

const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=648285&page=1';
var p = [];
var y;
var i = 0;
fetchData(url);
function fetchData(url) {
    fetch(url).then((response) => response.json()).then(function(data) {
        console.log(data);
        data.results.forEach((art) => {
     p[i] = `<div class="card"> 
 <div class="card__image"><img src="${art.image_urls.square_medium.slice(0,6).replace('i.pximg.net', 'i.pixiv.cat');}" alt="image" ></div>
 <br>
 <span class="card__title"> ${art.title}</span>
 </div>`;
            i++;
 
            var x = document.getElementsByClassName('card__wrapper');
            var y = p.join(' ');
            x[0].innerHTML = y;
        });
    });
}

/*I have used simple CSS to make the cards responsive */
*,
*:after,
*:before {
    box-sizing: border-box;
}
 
body {
    background-color: #fff;
    color: #333;
    font-family: Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}
 
a {
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}
 
.card__wrapper {
    display: flex;
    margin: 0 auto;
    padding: 0%;
    max-width: 1024px;
    background-color: #ccc;
    flex-wrap: wrap;
    flex-direction: row;
}
 
.card {
    background-color: #fff;
    border-radius: 6px;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
    margin: 10px 10px;
    padding: 20px;
    text-align: center;
}
 
.card__title {
    margin-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
}
 
.card__cta {
    padding: 10px 25px;
    margin: 10px 0px;
    background-color: #e26d00;
    font-size: 20px;
    color: #fff;
    width: 100%;
}
 
.card__cta:hover {
    background-color: #ffb066;
}
 
@media screen and (max-width: 449px) {
    .card {
        width: 95%;
    }
}
 
@media screen and (min-width: 450px) and (max-width: 699px) {
    .card {
        width: 45.5%;
    }
}
 
@media screen and (min-width: 700px) and (max-width: 1023px) {
    .card {
        width: 30.5%;
    }
}
 
@media screen and (min-width: 1024px) {
    .card {
        width: 23%;
    }
}

<section>
  <main class="card__wrapper"></main>
</section>

srgbnd · Accepted Answer · 2021-10-16 07:14:54Z

1

Now your code output is the following:

{
  "message": "Uncaught SyntaxError: Missing } in template expression",
  "filename": "https://stacksnippets.net/js",
  "lineno": 107,
  "colno": 39
}

It is a syntax error. Try the fixed code below.

const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=648285&page=1';
var p = [];
var y;
var i = 0;
fetchData(url);
function fetchData(url) {
fetch(url).then((response) => response.json()).then(function(data) {
    //console.log('data', data);
    data.illusts.slice(0, 6).forEach((art) => {
      var imgSrc = art.image_urls.square_medium.replace('i.pximg.net', 'i.pixiv.cat');
      p[i] = `<div class="card">
        <div class="card__image"><img src="${imgSrc}" alt="image" ></div>
        <br>
        <span class="card__title"> ${art.title}</span>
        </div>`;
      i++;
 
      var x = document.getElementsByClassName('card__wrapper');
      var y = p.join(' ');
      x[0].innerHTML = y;
    });
});
}

/*I have used simple CSS to make the cards responsive */
*,
*:after,
*:before {
    box-sizing: border-box;
}
 
body {
    background-color: #fff;
    color: #333;
    font-family: Tahoma, sans-serif;
    margin: 0;
    padding: 0;
}
 
a {
    text-decoration: none;
}
 
a:hover {
    text-decoration: underline;
}
 
.card__wrapper {
    display: flex;
    margin: 0 auto;
    padding: 0%;
    max-width: 1024px;
    background-color: #ccc;
    flex-wrap: wrap;
    flex-direction: row;
}
 
.card {
    background-color: #fff;
    border-radius: 6px;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
    margin: 10px 10px;
    padding: 20px;
    text-align: center;
}
 
.card__title {
    margin-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
}
 
.card__cta {
    padding: 10px 25px;
    margin: 10px 0px;
    background-color: #e26d00;
    font-size: 20px;
    color: #fff;
    width: 100%;
}
 
.card__cta:hover {
    background-color: #ffb066;
}
 
@media screen and (max-width: 449px) {
    .card {
        width: 95%;
    }
}
 
@media screen and (min-width: 450px) and (max-width: 699px) {
    .card {
        width: 45.5%;
    }
}
 
@media screen and (min-width: 700px) and (max-width: 1023px) {
    .card {
        width: 30.5%;
    }
}
 
@media screen and (min-width: 1024px) {
    .card {
        width: 23%;
    }
}

<section>
  <main class="card__wrapper">
  </main>
</section>

edited Oct 16, 2021 at 7:14

answered Oct 16, 2021 at 6:08

srgbnd

5,65210 gold badges46 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shmack Over a year ago

What the actual heck!? fetch(url).then((response) => response.json()) was returning {} for me!

TravelWhere Over a year ago

Although the syntax error is fixed I don't see it outputting the images

srgbnd Over a year ago

@TravelWhere I thought you were stack on the syntax error and once it fixed wanted to proceed yourself. I have fixed some JS issues. Check it again.

TravelWhere Over a year ago

@srgbnd how do I limit the amount of image shown to 6 images?

srgbnd Over a year ago

@TravelWhere I've added the limit just now. Check it.

Collectives™ on Stack Overflow

How to fetch image from api?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related