Js api Coll its undefine

title and img undifyne
code … where my wrong…

const albamBtn = document.getElementById('albam');

const albamContent = document.getElementById('view-content');

albamBtn.addEventListener('click', () => {
  const url = 'https://jsonplaceholder.typicode.com/photos';

  fetch(url)
    .then((response) => response.json())

    .then((res) => {
      console.log(res);

      imgcontent(res);
    });
});

const imgcontent = (picture) => {
  let chobi = [];

  for (let i = 0; i < 20; i++) {
    if (picture) {
      chobi.push(`${picture[`albumId[i]`]} - ${picture[`[i]`]}`);
    } else {
      break;
    }
  }

  const newInnerHTML = `

    <div class="row ">

    <div class="col md-6 ml-auto mr-auto">

    <h2>Title:${chobi.title}</h2>

      <img src="${chobi.thumbnailUrl}/>"

    </div>

    </div>

    `;

  albamContent.innerHTML = newInnerHTML;
};

I’ve edited your post for readability. I also formatted the code a bit.

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

<h2>Title:${chobi.title}</h2>
<img src="${chobi.thumbnailUrl}/>"

Where are you setting chobi.title and chobi.thumbnailUrl? You’ve declared chobi as an array at the beginning of the imgcontent function, so you would be accessing elements in that array with square bracket notation (e.g. chobi[1]). You are trying to access property names on the array. You would want chobi to be an object to do this.

It looks like you are trying to go through the first 20 items in the array returned from the fetch and print them to the page. You are passing that array into the imgcontent function via the picture argument. Do you need the chobi array in this case? Can’t you just go through the picture array you passed in to the function?

In the for loop is where you will access the various properties for each object in the array. For example, you would access the albumId as picture[i].albumId.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.