I am getting input which a superhero from marvels api and I can see the description name and id but when it comes to series comics and events which are collections i can not display them correctly.

I have tried using the map function. Everything works besides the nested array.

This is the output in the console log:

.

document.querySelector("button").addEventListener("click", fetchGetSuper)

function fetchGetSuper() {
  const superChoice = document.querySelector("input").value
  const imageSize = "standard_fantastic"`)
    .then(response => {
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then(data => {
      console.log(data.data.results);
      var html = data.data.results.map(comic => {
          return `<div class="comics">
                    <p>Name: ${comic.name} </p>
                    <p>Description: ${comic.description} </p>
                    <img src = "${comic.thumbnail.path}/${imageSize}.${comic.thumbnail.extension}">
                    <ul>
                      <li><p>${comic.urls}<p></li>
                    </ul>
                 </div>`;
        })
        .join("")
      console.log(html);
      document.querySelector(`#cards`).insertAdjacentHTML("afterbegin", html);

    })
    .catch(error => {
      console.log(error);
    });
}

<input>
<button>Get a Marvel</button>
<div id="cards"></div>

I am getting input which a superhero from marvels api and I can see the description name and id but when it comes to series comics and events which are collections i can not display them correctly.

I have tried using the map function. Everything works besides the nested array.

This is the output in the console log:

.

document.querySelector("button").addEventListener("click", fetchGetSuper)

function fetchGetSuper() {
  const superChoice = document.querySelector("input").value
  const imageSize = "standard_fantastic"`)
    .then(response => {
      if (!response.ok) {
        throw Error("ERROR");
      }
      return response.json();
    })
    .then(data => {
      console.log(data.data.results);
      var html = data.data.results.map(comic => {
          return `<div class="comics">
                    <p>Name: ${comic.name} </p>
                    <p>Description: ${comic.description} </p>
                    <img src = "${comic.thumbnail.path}/${imageSize}.${comic.thumbnail.extension}">
                    <ul>
                      <li><p>${comic.urls}<p></li>
                    </ul>
                 </div>`;
        })
        .join("")
      console.log(html);
      document.querySelector(`#cards`).insertAdjacentHTML("afterbegin", html);

    })
    .catch(error => {
      console.log(error);
    });
}

<input>
<button>Get a Marvel</button>
<div id="cards"></div>

• javascript
• arrays

• 2 Did you really just give the whole world your API key?? You might want to request a new one now, and invalidate that one. – ADyson Commented Feb 11 at 8:45
• 2 You probably don't want to include your apiKey on a public forum. Showing us the fetch doesn't really help - include a sample of JSON in the question rather than relying the third-party api. – fdomn-m Commented Feb 11 at 8:47
• 1 Agreed, this is about processing the array, not about a problem with the fetch. So just showing us (a relevant subset of) the returned JSON would be far more useful to your question. – ADyson Commented Feb 11 at 8:48
• 3 As noted in staging grounds (though now a different property) - comic.urls is (likely) a nested array, so outputting as ${comic.urls} will give you [object, Object] - you need to iterate/expand this before adding to the html string. – fdomn-m Commented Feb 11 at 8:49
• 1 Think about it... what exactly did you expect ${comic.urls} to output - and why?? There's no inherent default representation of an array and its data, JS doesn't magically break down an array and all the properties of the objects within it for you and work out what you meant and what you wanted to display, and how you wanted to display it. It would have to guess! So of course you have to loop and access each property individually - just like you've done for the results array above it. It's not really clear why you thought the urls bit would be any different? They're both arrays. – ADyson Commented Feb 11 at 8:57

2 Answers 2

You need to also map the comics:

var html = data.data.results.map(comic => `<div class="comics">
                <p>Name: ${comic.name} </p>
                <p>Description: ${comic.description} </p>
                <img src = "${comic.thumbnail.path}/${imageSize}.${comic.thumbnail.extension}">
                <ul>
                ${comicics.items.map(item => `<li><a href="${item.resourceURI}">${item.name}</a></li>`).join('')}
                </ul>
             </div>`)
    .join("")
  document.querySelector(`#cards`).insertAdjacentHTML("afterbegin", html);

You can't access name and resourceURI because they are nested in the items property which is an array.

The items array is a property of the comics key, which is in the index 0 of the results array. As results is an Array(1), can access comics with data.data.results[0]ics and then, map items to access what is inside the items array