-5

I am working on a side-project to improve my FE-development skills and am designing a (fictional) toilet paper shop.

As a first step, I hard-coded some mock products directly into my HTML file (including brand name, product name and price). However, as a next step I want to put the product information in arrays instead and have my web page display the product info dynamically. Here is my array structure:

let products = [
    {
        id: 0,
        name: "Normal Tee",
        imageSrc: "",
        formattedPrice: "15 €",
        price: "15.00",
        brand: "Tee Pee Originals",
        category: "['classic', '2x layers']"
    },
    {
        id: 1,
        name: "Rainbow Tee",
        imageSrc: "",
        formattedPrice: "20 €",
        price: "20.00",
        brand: "WC Unlimited",
        category: "['colorful', '2x layers']"
    },
    {
        id: 2,
        name: "Eco Tee",
        imageSrc: "",
        formattedPrice: "25 €",
        price: "25.00",
        brand: "Tee Pee Originals",
        category: "['eco-friendly', '2x layers']"
    },
    {
        id: 3,
        name: "Deluxe Tee",
        imageSrc: "",
        formattedPrice: "30 €",
        price: "30.00",
        brand: "Tee Pee Originals",
        category: "['deluxe', '5x layers']"
    },
    {
        id: 4,
        name: "Comfy Tee",
        imageSrc: "",
        formattedPrice: "22 €",
        price: "22.00",
        brand: "The Comfy Paper",
        category: "['3x layers']"
    },
    {
        id: 5,
        name: "Super Comfy Tee",
        imageSrc: "",
        formattedPrice: "27 €",
        price: "27.00",
        brand: "The Comfy Paper",
        category: "['4x layers']"
    },
    {
        id: 6,
        name: "Save The World Tee",
        imageSrc: "",
        formattedPrice: "35 €",
        price: "35.00",
        brand: "Toilets of the Future",
        category: "['3x layers', 'eco-friendly']"
    }
];

As you can see, what I am still missing is the image for each product. I have the files for the images in my project folder, but the autocomplete of my IDE (IntelliJ) isn't suggesting anything when I start typing a file path e.g. "./images/..." . Is the syntax for using file paths within the arrays the same as in the src attribute in an HTML file?

For example, if the image for my first product was located in my images folder, do I also just use "./images/(insert file name)" in the data point "imageSrc" in the array?

Improve this question
12
  • 3
    What do you mean by "use" for the image URLs? What does your code need to do with each URL, in other words? Commented Nov 18 at 12:41
  • 3
    What exactly prevents you from using your image file paths here? They're just string values, and you're already showing how to use string values in a data structure. It's not clear what you're looking for because it's not clear what problem you've encountered. Commented Nov 18 at 12:44
  • Step 1. Figure out what path the images are exposed from. Maybe it's ./images/whatever.jpg, maybe it's /static/img/whatever.png or something else. Step 2. Use that path. Having an array or not has no influence on this. You only need to know what the path is and that will depend on your project configuration. Commented Nov 18 at 12:47
  • 1
    @Ems: But it's still not clear what the actual problem is. What stops you from using this data structure? What stops you from writing JavaScript code which loops over this array and adds HTML elements to the page? Where/how exactly do file paths become a problem? Commented Nov 18 at 12:59
  • 6
    @Ems: Yes, the syntax of a string is still a string regardless of what data that string contains. It sounds like the problem here isn't that you've encountered an error, but that you've been reluctant to try. You are encouraged to make an attempt. Commented Nov 18 at 13:05
Related questions
6380
How do I include a JavaScript file in another JavaScript file?
2031
How to merge two arrays in JavaScript and de-duplicate items
3551
pretty-print JSON using JavaScript
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.