1

Code:

const url = "https://marje.no/Wordpress/wp-json/wc/store/products?_embed";
const product = document.querySelector(".container");

async function getproduct() {
  const response = await fetch(url);
  const results = await response.json();
  for (let i = 0; i < results.length; i++) {
    console.log(results[i]);

    product.innerHTML += `<div class="product">
                        <div class="productImg"> 
                        <img class="img" src="/${results[i].images.src}" 
    alt="${results[i].images[.0.alt]}">
                        </div>
                        <div class="productInfo">
                        <h3 class="productName">${results[i].name}</h3><p> 
    $ ${results[i].prices.price} ,- </p>
                        <a href="${results[i].permalink}" 
    class="button">View More</a>
                        </div>
                        </div>`;
  }
}

getproduct();

my webpage: http://127.0.0.1:5500/html/cms-ca/cms-ca.html

For a school assignment:

I am trying the fetch data from a WordPress REST API web hosted page, and display that data on a separate page.

I am getting all the data I need, but when I try to pull the image inn, the path isn't recognised.

When I:

console.log(results[i]);

I get:

{
  "id": 185,
  "name": "Tulips",
  "permalink": "https://marje.no/Wordpress/product/tulips/",
  ... other properties ... 
  "images": [{
    "id": 186,
    "src": "https://marje.no/Wordpress/wp-content/uploads/2021/03/tulips-scaled.jpg",
    "thumbnail": "https://marje.no/Wordpress/wp-content/uploads/2021/03/tulips-324x324.jpg",
    "srcset": "",
    "sizes": "(max-width: 3648px) 100vw, 3648px",
    "name": "tulips",
    "alt": "colorful tulips"
  }]
}

Sorry for the poor terminology, new to javascript!

Thanks for the help.

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
MarJern
  • 11
  • 2
  • What are you trying to do with `.0.src` ? – Nick Parsons Mar 06 '21 at 12:33
  • Hehe, I am not sure how to actually get the src since its inside the 0 object under "Images" – MarJern Mar 06 '21 at 12:44
  • 1
    Yeah, that's going to cause issues in your program. Can you show an example of what `console.log(result[i])` is giving by editing your question and adding it in? PS: Please don't post images of your code, instead, use StackOverflow's code formatting tools ([Why not upload images of code/errors when asking a question?](https://meta.stackoverflow.com/q/285551)) – Nick Parsons Mar 06 '21 at 12:46
  • You need to use `${results[i].images[0].src}` as the source. Since access `.images` gives an array, you need to access the first object in it using `[0]`. This will then give an object, which you can access the `src` property on. – Nick Parsons Mar 06 '21 at 13:10
  • Thank you for taking the time to help me Nick! I tried adding the code you suggested, and in the console I get til error: "Failed to load resource: the server responded with a status of 404 (Not Found)" – MarJern Mar 06 '21 at 13:13
  • You still have the `const results = ...` line above your for loop right? – Nick Parsons Mar 06 '21 at 13:16
  • yes, only edited the `${results[i].images[0].src}` – MarJern Mar 06 '21 at 13:18
  • Seems to work: https://jsfiddle.net/obu06ayp/ based on the code you've provided. – Nick Parsons Mar 06 '21 at 13:19
  • I copied your code from jsfiddle and pasted into visual studio code. It worked when I updated it.. I see I removed the "alt" attribute, would that make so that the image couldn't render? Or it may just be the "live preview" that was lagging. Thank you so much for all the help, I really appreciate it!. I have a deadline for this project tomorrow, and this certainly saved me! :) – MarJern Mar 06 '21 at 13:23
  • Removing the `alt` shouldn't have changed anything (the alt attribute is used for screen readers/title text if the image doesn't load). I think your guess about the live preview not updating would have been the culprit. Glad you've sorted it all out now :) – Nick Parsons Mar 06 '21 at 13:27

0 Answers0