Mapping through an array of objects returns unnecessary comma character in markup

Question

Hello, I am building gold shop website and i have an array of objects. I am mapping through an array of objects to get products displayed on the main page. However, there is an extra comma character in the output displayed which I don't need. Can anyone help me fix this? You can see the images

const products = [
  {
    id: 1,
    title: 'ძველი ქარხნული საათი',
    prob: 583,
    weight: 19.74,
    price: 2100,
    img1: 'img/watchWm1.jpg',
    img2: 'img/watchWm.jpg',
    category: 'watch',
    gender: 'woman'
  },
  {
    id: 2,
    title: 'ძველი ქარხნული საათის ბრასლეტი',
    prob: 583,
    weight: 13.5,
    price: 2000,
    img1: 'img/watchBracletWm.jpg',
    img2: '',
    category: 'bracelet',
    gender: 'woman'
  },
  {
    id: 3,
    title: 'ძველი ქარხნული საათის ბრასლეტი',
    prob: 583,
    weight: 22.15,
    price: 3300,
    img1: 'img/watchBracletWm2.jpg',
    img2: '',
    category: 'bracelet',
    gender: 'woman'
  },
  {
    id: 4,
    title: 'გრაციელას ბრენდის ბრასლეტი',
    prob: 750,
    weight: 27.3,
    price: 5400,
    img1: 'img/4.jpg',
    img2: '',
    category: 'bracelet',
    gender: 'woman'
  },
  {
    id: 5,
    title: 'იტალიური ქარხნული ბრასლეტი(კაცის)',
    prob: 585,
    weight: 42.91,
    price: 6000,
    img1: 'img/5.jpg',
    img2: '',
    category: 'bracelet',
    gender: 'man'
  }
];

//Display All Products on Main Page
var productsOuterDiv = document.getElementById('productsOuterDiv');
const productsBox = products.map(product => `<div class='productDiv'>
      <div class='imgDiv'>
      <img src='${product.img1}' alt='${product.title}'>
      </div>
      <h6><strong>${product.title}</strong></h6>
      <p><strong>წონა:</strong> ${product.weight} გრამი</p>
      <p><strong>სინჯი(პრობი):</strong> ${product.prob}</p>
      <p><strong>ფასი:</strong> ${product.price} ლარი</p>
      <button class='btn btn-details'>დეტალურად</button>
    </div>`);
productsOuterDiv.innerHTML = productsBox;

there is the image?

hashirama
– hashirama

2021-05-11 18:11:09 +00:00
Commented May 11, 2021 at 18:11 — hashirama
– hashirama, Commented May 11, 2021 at 18:11

epascarello · Accepted Answer · 2021-05-11 18:21:14Z

3

You have an array, when you productsOuterDiv.innerHTML = productsBox; it runs toString which separates them with a comma. Use join

productsOuterDiv.innerHTML = productsBox.join('');

var arr = [`<span>1</span>`,`<span>2</span>`,`<span>3</span>`];

document.getElementById("out1").innerHTML = arr;
document.getElementById("out2").innerHTML = arr.join("");

span{ border: 1px dashed #CCC; }

<div id="out1"></div>
<hr>
<div id="out2"></div>

answered May 11, 2021 at 18:21

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wyck Over a year ago

See in the documentation where it describes how arrays are automatically converted to strings by converting all the elements to strings, then joining them together with commas.

Collectives™ on Stack Overflow

Mapping through an array of objects returns unnecessary comma character in markup

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related