Code to dynamically add a div to an HTML template using JavaScript logic

Question

Code to dynamically add a div to an HTML template using JavaScript logic

A simple web application was developed by me to retrieve recipe data from an API. This data is then displayed by inserting it into an HTML template specified in the JavaScript file. The layout is managed using a float grid in CSS.

Here is the code snippet responsible for rendering the result and inserting it into the template:

function displayRecipeSearchData(data) {
  var results = ' ';
  if (data.hits.length) {
    data.hits.forEach(function(item) {
      results += template.item(item);
    });
  }
  else {
    results += '<p> No results </p>';
  }
  $('#js-search-results').html(results);
}

The HTML template used to display responses:

const template = {
  item: function(item) {
    return '<div class ="col-4">' +
             '<div class ="result">' +
               '<div class="recipelabel">' +
                 '<div class="reclist">' + item.recipe.ingredientLines + '</div><!-- end reclist -->' +
                  '<p class="label">' + item.recipe.label + '</p>' +
                  '<div class="thumbnail">' + 
                    '<a href="'+ httpsTransform(item.recipe.url) + '" target="_blank">' +
                      '<img src="' + item.recipe.image + '"alt="' + item.recipe.label + '">' +
                    '</a>' +
                    '<div class="recipesource">' +
                      '<p class="source">' + item.recipe.source + '</p>' +
                    '</div><!-- end recipesource -->' +
                  '</div><!-- end thumbnail -->' +
                '</div><!-- end recipelabel -->' +
              '</div><!-- end result -->' + 
            '</div><!-- end col-4 -->';
  }
};

I am attempting to modify the logic in the displayRecipeSearchData function so that a <div></div> encompasses every group of three results. This will ensure that the rows/columns function correctly in the flex grid. I have experimented with various approaches, but have not achieved the correct syntax/logic yet. Would nesting an if statement within the existing statement be an effective solution?

if(i % 3 === 0 ){ results. += '<div class="row">''</div>'}

Any advice or suggestions on this matter would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

Consider utilizing an additional variable to store a single row of HTML:

function displayRecipeSearchData(data) {
  var results = ' ', row = '';
  if (data.hits.length) {
    data.hits.forEach(function(item, i) {
      row += template.item(item);
      if (i % 3 == 2) { // wrap row and add to result
        results += '<div class="row">' + row + '</div>';
        row = '';
      }
    });
    if (row.length) { // flush remainder into a row
      results += '<div class="row">' + row + '</div>';
    }
  }
  else {
    results += '<p> No results </p>';
  }
  $('#js-search-results').html(results);
}

Answer 2

Consider utilizing an additional variable to store a single row of HTML:

function displayRecipeSearchData(data) {
  var results = ' ', row = '';
  if (data.hits.length) {
    data.hits.forEach(function(item, i) {
      row += template.item(item);
      if (i % 3 == 2) { // wrap row and add to result
        results += '<div class="row">' + row + '</div>';
        row = '';
      }
    });
    if (row.length) { // flush remainder into a row
      results += '<div class="row">' + row + '</div>';
    }
  }
  else {
    results += '<p> No results </p>';
  }
  $('#js-search-results').html(results);
}

Answer 3

Answer №2

In my opinion, you're making things more difficult than they need to be.

Instead of manually writing the template as a string and trying to inject it into the correct place (which could potentially create invalid HTML), consider using JavaScript's built-in element creation. It will be more modular to create children in their own functions. Using a function instead of an object to hold your object creator will also make it much easier. Although my version may involve more code, it will be easier to modify in the long run.

const Itemizer = function(){
  this.items = [];
  const createEl = function(elType, classes, attributes, text, html){
    let el = document.createElement(elType)
    for(let i = 0; i < classes.length; i++){
      el.classList.add(classes[i]
    }
    for(let attr in attributes){
      el.setAttribute(attr, attributes[attr])
    }
    if(text){
      el.innerText = text
    }
    if(html){
      el.innerHTML = html
    }
    return el
  };

  const createThumbnail = function(url, image, alt, source){
    let thumbnail = createEl("DIV", ["thumbnail"]),
        link = createEl("A", [], {href: httpsTransform(url)}),
        img = createEl("IMG", [], {src: image, alt: label});
        rSource = createRecipeSource(source)
    link.appendChild(img);
    thumbnail.appendChild(link);
    thumbnail.appendChild(rSource)
    return thumbnail
  };

  const createRecipeSource = function(source){
    let wrapper = createEl("DIV", ["recipe-source"]);
    wrapper.appendChild(createEl("P", ["source"], {}, source))
    return wrapper
  }

  const createRecipeLabel = function({
    recipe: {
      ingredientLines,
      label,
      url,
      source
    }
  }){
    let labelWrapper = createEl("DIV", ["recipe-label"]),
        ingredients = createEl("DIV", ["rec-list"], {}, false, ingredientLines),
        recipeLabel = createEl("P", ["label"], {}, label),
        thumbnail = createThumbnail(url, image, label, source)
    labelWrapper.appendChild(ingredients)
    labelWrapper.appendChild(recipeLabel)
    labelWrapper.appendChild(thumbnail)
    return labelWrapper
  }

  const createNewItem = function(data){
    let columnWrapper = createEl("DIV", ["col-4"]),
        result = createEl("DIV", ["result"]),
        label = createRecipeLabel(data)

    columnWrapper.appendChild(result)
    result.appendChild(label)
    this.items.push(columnWrapper)
    return columnWrapper
  }.bind(this)

  const getItems = function(){
   return this.items
  }.bind(this)

  const getRows = function(){
    const rows = []
    let row;
    for(let i = 0; i < this.items.length; i++){
      const item = this.items[i]
      if(i % 3 === 0){
        row = createEl("DIV", ["row"])
        rows.push(row)
      }
      row.appendChild(item)
    }
    return rows;
  }.bind(this)

  return {
    add: createNewItem,
    get: getItems,
    rows: getRows
  }
}

You can then implement the function in the following way:

const template = new Itemizer()
function displayRecipeSearchData(data) {
  let rows
  if (data.hits.length) {
    for(let i = 0; i < data.hits.length; i++){
      template.add(data.hits[i])
    }
    rows = template.rows()
  } else {
    const p = document.createElement("P")
    p.innerText = "No Results")
    rows = [p]
  }
  const resultsWrapper = document.getElementById("js-search-results");
  for(let i = 0; i < rows.length; i++){
    resultsWrapper.appendChild(rows[i])
  }
}

It's also recommended to separate CSS classes with hyphens, so I have adjusted some of your class names to reflect that.

Additionally, note that you don't necessarily need more than 1 row. If you wrap all your items in one row section, columns will automatically overflow to the next row when they reach the grid limit.

Lastly, avoid using target blank as it goes against proper UX and introduces security vulnerabilities. If users need to open a link in a new tab, they can simply hold ctrl or right-click and choose "open in new tab."

Answer 4

In my opinion, you're making things more difficult than they need to be.

Instead of manually writing the template as a string and trying to inject it into the correct place (which could potentially create invalid HTML), consider using JavaScript's built-in element creation. It will be more modular to create children in their own functions. Using a function instead of an object to hold your object creator will also make it much easier. Although my version may involve more code, it will be easier to modify in the long run.

const Itemizer = function(){
  this.items = [];
  const createEl = function(elType, classes, attributes, text, html){
    let el = document.createElement(elType)
    for(let i = 0; i < classes.length; i++){
      el.classList.add(classes[i]
    }
    for(let attr in attributes){
      el.setAttribute(attr, attributes[attr])
    }
    if(text){
      el.innerText = text
    }
    if(html){
      el.innerHTML = html
    }
    return el
  };

  const createThumbnail = function(url, image, alt, source){
    let thumbnail = createEl("DIV", ["thumbnail"]),
        link = createEl("A", [], {href: httpsTransform(url)}),
        img = createEl("IMG", [], {src: image, alt: label});
        rSource = createRecipeSource(source)
    link.appendChild(img);
    thumbnail.appendChild(link);
    thumbnail.appendChild(rSource)
    return thumbnail
  };

  const createRecipeSource = function(source){
    let wrapper = createEl("DIV", ["recipe-source"]);
    wrapper.appendChild(createEl("P", ["source"], {}, source))
    return wrapper
  }

  const createRecipeLabel = function({
    recipe: {
      ingredientLines,
      label,
      url,
      source
    }
  }){
    let labelWrapper = createEl("DIV", ["recipe-label"]),
        ingredients = createEl("DIV", ["rec-list"], {}, false, ingredientLines),
        recipeLabel = createEl("P", ["label"], {}, label),
        thumbnail = createThumbnail(url, image, label, source)
    labelWrapper.appendChild(ingredients)
    labelWrapper.appendChild(recipeLabel)
    labelWrapper.appendChild(thumbnail)
    return labelWrapper
  }

  const createNewItem = function(data){
    let columnWrapper = createEl("DIV", ["col-4"]),
        result = createEl("DIV", ["result"]),
        label = createRecipeLabel(data)

    columnWrapper.appendChild(result)
    result.appendChild(label)
    this.items.push(columnWrapper)
    return columnWrapper
  }.bind(this)

  const getItems = function(){
   return this.items
  }.bind(this)

  const getRows = function(){
    const rows = []
    let row;
    for(let i = 0; i < this.items.length; i++){
      const item = this.items[i]
      if(i % 3 === 0){
        row = createEl("DIV", ["row"])
        rows.push(row)
      }
      row.appendChild(item)
    }
    return rows;
  }.bind(this)

  return {
    add: createNewItem,
    get: getItems,
    rows: getRows
  }
}

You can then implement the function in the following way:

const template = new Itemizer()
function displayRecipeSearchData(data) {
  let rows
  if (data.hits.length) {
    for(let i = 0; i < data.hits.length; i++){
      template.add(data.hits[i])
    }
    rows = template.rows()
  } else {
    const p = document.createElement("P")
    p.innerText = "No Results")
    rows = [p]
  }
  const resultsWrapper = document.getElementById("js-search-results");
  for(let i = 0; i < rows.length; i++){
    resultsWrapper.appendChild(rows[i])
  }
}

It's also recommended to separate CSS classes with hyphens, so I have adjusted some of your class names to reflect that.

Additionally, note that you don't necessarily need more than 1 row. If you wrap all your items in one row section, columns will automatically overflow to the next row when they reach the grid limit.

Lastly, avoid using target blank as it goes against proper UX and introduces security vulnerabilities. If users need to open a link in a new tab, they can simply hold ctrl or right-click and choose "open in new tab."

Code to dynamically add a div to an HTML template using JavaScript logic

Answer №1

Answer №2

Similar questions

Issue encountered with JavaScript function within TypeScript file connected to HTML code

Apply jQuery addClass to the first child option in a multi-select dropdown menu

Error message indicating that Element <> cannot be scrolled into view persisting despite attempting common troubleshooting methods

Is it possible to trigger a JavaScript function by manipulating the URL of an HTML page?

When Components in Vue are called in a Single File, certain elements may not be displaying as expected

Unable to activate focus() on a specific text field

Utilizing Props in React to Slice and Dice Data Within a Separate Component

Experiencing the Pause: A Fresh Take on

Instructions for appending an id to the URL of events in fullcalendar using Rails

Exclude specific fields when updating a document in Firebase using the update()

Prevent pinch zoom in webkit (or electron)

Set a value for the hidden field on the page using client-side scripting

Issue with wrapper not aligning correctly at the top of the screen

Once an AJAX request is sent on mouseover and a response is received, it should not be sent again if I hover over the HTML element a second time

A guide to customizing node names using vue-slider-component

I am encountering an issue where the nested loop in Angular TypeScript is failing to return

JavaScript - Unexpected fluctuations in variable values

Having trouble getting the jQuery autocomplete feature to work on textboxes that are generated dynamically

Updating JQuery dropdown menu fills in additional form fields based on selection

Fade-In and Fade-Out CSS Effect with Background Images Displaying a Blank Last Image