Finding the comma, where is it coming from? Javascript Arrays within Objects

Question

Ok so i have hacked something together it works as intended but I get a comma between entries more than one.

I have this

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  let markup = '';

  markup = `
    <section>
      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-purple-800">
          <span class="text-base text-white font-bold">HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.sitePixels.map((x) => x)}
          ${HCP365Object.searchPixels.map((x) => x)}
          ${HCP365Object.emailPixels.map((x) => x)}
          ${HCP365Object.programmaticPixels.map((x) => x)}
        </div>
      </div>

      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-gray-500">
          <span class="text-base text-white font-bold">NON HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.map((x) => x)}
        </div>
      </div>
  `;

  markup += '</section>';

  sendResponse(markup);
});

Which in turn gives me this:

Where the little bugger is here:

Between the element which is :

const pixelInfo = `
    <div class="element">

      <div class="question flex justify-between px-6 py-4 ${colorGrade}">
        <span class="text-base text-white font-bold">${pixelType}</span>
        <button><i class="fas fa-plus-circle"></i></button>
      </div>

      <div class="answer hideText">
        <span id="pixel-url" class="c-word-wrap text-sm font-mono">${pixelUrl}</span>
          <span id="query-params">${queryParams}</span>
      </div>
    </div>
  `;

Each pixelInfo is pushed into it's own array which is within an object. Is this comma here because I am mapping through an array and it's chucking out the , ? Is there a way to get rid of it?

This is my whole code

const HCP365Object = {
  sitePixels: [],
  searchPixels: [],
  emailPixels: [],
  programmaticPixels: [],
  nonHCP365Pixels: [],
};

// Function to break down the http request into our pixel url with a subset of associating query params.
const onBeforeSendHeadersListener = function (details) {
  let regex = /[?&]([^=#]+)=([^&#]*)/g,
    pixelType,
    pixelUrl = `${details.url}`,
    queryParams,
    params = {},
    match,
    colorGrade;

  if (details.url.includes('&ch=1&')) {
    pixelType = 'HCP365 Site Pixel';
    colorGrade = 'bg-purple-600';
  } else if (details.url.includes('&ch=2&')) {
    pixelType = 'HCP365 Search Pixel';
    colorGrade = 'bg-purple-500';
  } else if (details.url.includes('&ch=3&')) {
    pixelType = 'HCP365 Email Pixel';
    colorGrade = 'bg-purple-400';
  } else if (details.url.includes('&ch=4&')) {
    pixelType = 'HCP365 Programmatic Pixel';
    colorGrade = 'bg-purple-300';
  } else {
    pixelType = 'Non HCP365 PP Pixel';
    colorGrade = 'bg-gray-400';
  }

  // Splitting url's query params out to key value pairs
  while ((match = regex.exec(details.url))) {
    params[match[1]] = match[2];
  }

  // Looping through object's key value pair to place into divs
  for (const [key, value] of Object.entries(params)) {
    queryParams += `
      <div class="text-sm my-1">
        <span class="font-bold uppercase mr-1">${key}: </span>
        <span class="font-normal font-mono capitalize c-word-wrap">${value}</span>
      </div>
    `;
  }

  const pixelInfo = `
    <div class="element">

      <div class="question flex justify-between px-6 py-4 ${colorGrade}">
        <span class="text-base text-white font-bold">${pixelType}</span>
        <button><i class="fas fa-plus-circle"></i></button>
      </div>

      <div class="answer hideText">
        <span id="pixel-url" class="c-word-wrap text-sm font-mono">${pixelUrl}</span>
          <span id="query-params">${queryParams}</span>
      </div>
    </div>
  `;

  // push the relevant pixel into the correct array
  if (details.url.includes('&ch=1&')) {
    HCP365Object.sitePixels.push(pixelInfo);
  } else if (details.url.includes('&ch=2&')) {
    HCP365Object.searchPixels.push(pixelInfo);
  } else if (details.url.includes('&ch=3&')) {
    HCP365Object.emailPixels.push(pixelInfo);
  } else if (details.url.includes('&ch=4&')) {
    HCP365Object.programmaticPixels.push(pixelInfo);
  } else {
    HCP365Object.nonHCP365Pixels.push(pixelInfo);
  }

  return HCP365Object;
};

// Apply the function entered to each header coming from contextweb domain
chrome.webRequest.onBeforeSendHeaders.addListener(
  onBeforeSendHeadersListener,
  {
    urls: ['https://*.contextweb.com/bh/*'],
  },
  ['requestHeaders']
);

// Initiate connection to send Message over to popup.js
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  let markup = '';

  markup = `
    <section>
      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-purple-800">
          <span class="text-base text-white font-bold">HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.sitePixels.map((x) => x)}
          ${HCP365Object.searchPixels.map((x) => x)}
          ${HCP365Object.emailPixels.map((x) => x)}
          ${HCP365Object.programmaticPixels.map((x) => x)}
        </div>
      </div>

      <div class="inner-element">

        <div class="question flex justify-between px-6 py-4 bg-gray-500">
          <span class="text-base text-white font-bold">NON HCP365 Pixels</span>
          <button><i class="fas fa-plus-circle"></i></button>
        </div>

        <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.map((x) => x)}
        </div>
      </div>
  `;

  markup += '</section>';

  sendResponse(markup);
});

I know it's very hacky! But it works

map returns an array and you guess you are forcing the template to do toString() on the array so you would get commas between items. You probably want `.....map(...).join('')` — epascarello, Jan 06 '22 at 16:32

phuzi · Accepted Answer · 2022-01-06T16:40:28.743

Taking another look at

markup = `
    ...

         <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.map((x) => x)}
        </div>

    ...
`;

The problem is HCP365Object.nonHCP365Pixels.map((x) => x). map() returns an array, and calling toString() will list all items separated by commas.

You will need to join() these to build the content without the commas.

Also, since .map((x) => x) just returns a copy of the array you can get rid of that too.

markup = `
    ...

        <div class="answer hideText">
          ${HCP365Object.nonHCP365Pixels.join('')}
        </div>

    ...
`;

You should use .join('') everywhere you use .map((x) => x)

Finding the comma, where is it coming from? Javascript Arrays within Objects

1 Answers1