0

I'm looping over an array of images, creating the div that will contain all the information and then appending it to the div that will contain them. What I've done is working just fine, however, I've been wondering if there's a cleaner way to do what I'm doing right now:

    artworks.records.forEach((artwork, i) => {
        const record = `<div class='artwork'>` +
            `<div class='artwork-image-container'>` +
                `<img class="artwork-image" src="${artwork.images.length > 0 ? artwork.images[0].baseimageurl : './assets/no-image-available.png'}" alt="${artwork.title}" />` +
            "</div>" +
            "<div class='image-description-container'>" +
                `<p class="image-description">${artwork.title}</p>`
            "</div>" +
        "</div>";
        divToBeRenderedIn.append(record);
    });
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • 2
    "template strings". you are already using it so it's very weird you did not use it around the whole block of HTML and that's it. – vsync Nov 28 '21 at 16:29
  • Alternative ways to represent HTML in your jQuery code will only go so far. You're looking for a templating library such as https://handlebarsjs.com/ – Tomalak Nov 28 '21 at 16:32
  • Alternatively, you might consider [Content Templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) – Randy Casburn Nov 28 '21 at 16:34
  • I advise you **not** to append the block of HTML at each iteration but first create a huge string block which will encompass all the items and inject it all at once. – vsync Nov 28 '21 at 16:34
  • Multiline string inserting is not the proper answer for this question. – Dropout Nov 28 '21 at 16:39
  • @Dropout - `template strings` are multiline strings and they are the only correct answer. [Read this answer](https://stackoverflow.com/q/805107/104380) – vsync Nov 28 '21 at 16:40
  • @vsync maybe by your standards if you intent on creating web content using strings because you just don't care about readability, scaling and maintainability of your code.. – Dropout Nov 28 '21 at 16:42
  • We're tilting heavily into the realm of "opinion" here – Daniel Beck Nov 28 '21 at 17:31
  • 1
    @Dropout - this is a jQuery question, and there is probably no need to import a 3rd-party templating engine just to solve this specific issue. You don't know the project's size, code structure and demands. For a "typical" jQuery-based, simple project, this is the way to go without much hassle. – vsync Nov 28 '21 at 17:33
  • Include a `display:none` div in your page when it first loads - then `.clone()` it, update any text/image src=, `.append()` it and then `.show()` it – freedomn-m Nov 28 '21 at 18:14
  • What you stated is a common way for jQuery to display dynamic pages rendering from data. Design your own template and attached it to HTML, then use it in the loop and get result. This is already the most straightforward way if your design block is not complicated. – Mingze Li Nov 29 '21 at 05:47

0 Answers0