Concatenate .map() values

Question

I have used .map() to created query parameters from an object of values from a form.

let object = {
  "selectedPriority": "9",
  "selectedShipOption": "Private Label",
  "selectedCustomerStatus": "No",
  "selectedColdOptions": [],
  "selectedDistributionOptions": ["Retail"],
  "selectedPackagingOption": "Lid",
  "selectedPrepOption": "Hot Water",
  "productParams": ["Kosher\n"],
  "productAppearance": "Grill Marks",
  "storage": "CAP",
  "preservatives": "Only natural preservatives"
}

Object.keys(object).map((key, index) => {
  console.log(`?${key}=${object[key]}`)
});

Now that I've manipulated each object and key, I'd like to concatenate all of them together to create one query string.

How can I do this?

Answer 1

Your .map isn't actually mapping anything right now - it's only console.logging and returning undefined.

If you want a query string, you should only add a ? before the first, and have a & between all the parameters. So, you might join by & and add ? to the beginning.

You may also consider using Object.entries to get both the key and value at once, rather than having to reference object[key].

You should also probably use encodeURIComponent to transform characters not safe for URLs (like plain spaces) into their proper escape sequences (like %20):

const object = {
  "selectedPriority": "9",
  "selectedShipOption": "Private Label",
  "selectedCustomerStatus": "No",
  "selectedColdOptions": [],
  "selectedDistributionOptions": ["Retail"],
  "selectedPackagingOption": "Lid",
  "selectedPrepOption": "Hot Water",
  "productParams": ["Kosher\n"],
  "productAppearance": "Grill Marks",
  "storage": "CAP",
  "preservatives": "Only natural preservatives"
}

const result = '?' + Object.entries(object).map(([key, value]) => {
  return `${key}=${encodeURIComponent(value)}`
}).join('&');
console.log(result);

Another option that doesn't require creating an intermediate array is to use reduce, passing an initial value of ?:

const object = {
  "selectedPriority": "9",
  "selectedShipOption": "Private Label",
  "selectedCustomerStatus": "No",
  "selectedColdOptions": [],
  "selectedDistributionOptions": ["Retail"],
  "selectedPackagingOption": "Lid",
  "selectedPrepOption": "Hot Water",
  "productParams": ["Kosher\n"],
  "productAppearance": "Grill Marks",
  "storage": "CAP",
  "preservatives": "Only natural preservatives"
};

const result = Object.entries(object).reduce((a, [key, value], i) => (
  a + (i !== 0 ? '&' : '' ) + `${key}=${encodeURIComponent(value)}`
), '?');
console.log(result);

Answer 2

You can concatenate them by applying the join function.

const object = {
  "selectedPriority": "9",
  "selectedShipOption": "Private Label",
  "selectedCustomerStatus": "No",
  "selectedColdOptions": [],
  "selectedDistributionOptions": ["Retail"],
  "selectedPackagingOption": "Lid",
  "selectedPrepOption": "Hot Water",
  "productParams": ["Kosher\n"],
  "productAppearance": "Grill Marks",
  "storage": "CAP",
  "preservatives": "Only natural preservatives"
};

const result = Object.keys(object)
  .map((key, index) => `?${key}=${object[key]}`)
  .join('\n');

console.log(result);

In case you are trying to create a URL query string, don't repeat the ? and encode the values by applying encodeURIComponent to each of them, then join with &.