Getting [object HTMLImageElement] when inserting img from json

Hi everyone, i'm getting this weird output when inserting an image from JSON to my HTML via JS. any ideas?

3 Replies

any help 😦 up

first of all, you set the image src to the key (which does not include filetype), i think you need the value second, you have an array with mixed types (strings for the first entries, and a dom element for the image) with the html.join("") that image breaks because everything becomes a string I think (without seeing the rest of your code), you better make those strings dom elements too, so for example

function detailFormatter(index, row){
  const html = [];
  $.each(row, function(key, value) {
    if(key === 'Building') {
      const img = document.createElement('img');
      img.src = value;
      html.push(img);
    } else {
      const p = document.createElement("p");
      p.innerHTML = `<b>${key}:</b> ${value}`;
      html.push(p)
    }
  }  
  return html;
}

function detailFormatter(index, row){
  const html = [];
  $.each(row, function(key, value) {
    if(key === 'Building') {
      const img = document.createElement('img');
      img.src = value;
      html.push(img);
    } else {
      const p = document.createElement("p");
      p.innerHTML = `<b>${key}:</b> ${value}`;
      html.push(p)
    }
  }  
  return html;
}

now you have an array of only domelements. this array you can add to the page with yourContainer.append(yourHtmlArray)

penso78•2y ago

yeaaaaaaaaaaaaaas ❤️ That's wooorked thank you very very much Big Thanks thumbup

u can't imagine how happy i am

Gaming

Programming

Getting [object HTMLImageElement] when inserting img from json