Display the array elements in a comma-separated format using querySelector

Currently, I am utilizing querySelector from https://www.npmjs.com/package/qs with the objective of transforming an array into a comma-separated string.

The process involves beginning with a URL search string and parsing it using the `qs` library. Subsequently, I made an attempt to utilize the `qs` `stringify` method to generate the desired formatted string.

const sUrl = 'a=1&b=1&c=1&c=2&c=3';
const oData = qs.parse(sUrl);
// Upon executing oData, the returned object is:
{
  a: 1,
  b: 1,
  c: ['1', '2', '3']
}
const sData = qs.stringify(oData);
// The resulting sUrl is: 'a=1&b=1&c%5B0%5D=1&c%5B1%5D=2&c%5B2%5D=3'

The intended output format is as follows: a=1&b=1&c=1,2,3

Answer №1

qs provides a way to set the array format, allowing you to achieve the desired output like this:

qs.stringify(oData, { arrayFormat: 'comma', encode: false })

Using encode: false ensures that the commas in the output are not URL encoded.

For example, if given the following input:

{
  a: 5,
  b: 7,
  c: ['apple', 'banana', 'cherry']
}

The result will be:

a=5&b=7&c=apple,banana,cherry

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to compare the position-x of two components that are aligned on the same line?

Check out this code snippet: <input id="homebutton" type="image" style="display:inline" src="home.png" name="saveform" class="btTxt submit ml-3" onclick="location.href='home.html&apos ...

Using JQuery to access the element within a span

I am completely new to jQuery and still learning as I go. Here is a snippet of the code I'm working on: <div class = 'buttons'> <span> <input type='button' value='BUTTON1' id='button1'> ...

Capture various data points in an array with each click

I am currently working on a menu of buttons where users can select multiple options at the same time. My goal is to record all selected buttons in one array instead of individual arrays for each button. The end result I hope to achieve is an array like t ...

Delay the execution using Javascript/jQuery, remove the last element from the DOM

Within a jQuery AJAX call, I am using a $.each() loop. Each element in the response data triggers the addition of a portion of HTML to a container class in my index.html file. To view the code and ensure proper formatting, visit the codepen here as the pa ...

Guide to linking an external URL with a lightbox image

I have created a gallery and an admin gallery page. In the admin gallery, there is a delete button that appears over the image. However, when I click on it, instead of showing the message "Are you sure?", it opens a lightbox. I suspect that the code for t ...

Having trouble establishing a connection between Node.js server and Google Directions API

Recently, I've been facing an issue while trying to establish a connection with the Google Directions API through my node server using a callback function. Surprisingly, it was working fine just a few days back, and now it seems like I accidentally br ...

Allow undici fetch requests to use self-signed certificates

What is the correct way to execute fetch('https://localhost:8888') when dealing with a locally hosted HTTP server that uses a self-signed certificate (using fetch which is derived from undici)? ...

Retrieve object containing all identical fields except for one specific field

Looking for help with filtering a JavaScript object [ { "comparing_result": "d_sens", "event": "Require", "master_field": "type_de_donnees", "master_field_ ...

The smooth transition of my collapsible item is compromised when closing, causing the bottom border to abruptly jump to the top

Recently, I implemented a collapsible feature using React and it's functioning well. However, one issue I encountered is that when the collapsible div closes, it doesn't smoothly collapse with the border bottom moving up as smoothly as it opens. ...

Material-UI: The call stack has exceeded the maximum range, causing an Uncaught RangeError

I am currently utilizing the Dialog and Select components offered by Material-UI in conjunction with React. Here is a quick example: import React from 'react'; import { Dialog, MenuItem, Select } from '@material-ui/core'; class Examp ...

Exclusive gathering to discuss @Input attributes

Is there a way to determine if all of the input properties in my component have been initialized with data? Are there any specific events that can help indicate this? Thank you for your assistance! ...

Add another condition to the current JavaScript rule

http://jsfiddle.net/e8B9j/2/ HTML <div class="box" style="width:700px">This is a sentence</div> <div class="box" style="width:600px">This is a sentence</div> <div class="box" style="width:500px">This is a sentence</div> ...

Arrangement of code: Utilizing a Node server and React project with a common set of

Query I am managing: a simple react client, and a node server that functions as both the client pages provider and an API for the client. These projects are tightly integrated, separate TypeScript ventures encompassed by a unified git repository. The se ...

Using Vue.js: How to Trigger a Child Method from the Parent Component

I recently explored the communication between components using vuejs and vuex. Here is a scenario I encountered: The first component is a menu The second component, nested within the first, is a hamburgerButton. In this specific case, when I click the ...

Calculate the mean value of each array, and then determine which average is higher

After running the code snippet provided, I noticed that it outputs "first" instead of "second". Can you help me verify my logic here? I first calculate both averages and then compare them to return the greater one. Do you see any issues with this approac ...

External JavaScript files are also subject to the same origin policy

Suppose a website http://www.mysite.com contains an external JavaScript file added like this: <script src="http://www.yoursite.com/new.js"></script> Within the http://www.yoursite.com/new.js JavaScript file, there is an AJAX call to a script ...

Bring in Bootstrap and the Carousel plugin using Webpack Encore

Currently, I am tackling an issue within my Symfony project that involves Webpack Encore and the loading of Bootstrap and the Carousel plugin. The problem may stem from how I import Bootstrap, as it seems to partially work when I import the file like this ...

Unable to download react native

Can anyone help me with this issue? Whenever I try to install something in React Native, Visual Studio Code displays the following error message. Is this a serious problem? pm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types% ...

Manipulate the inner HTML of a ul element by targeting its li and a child elements using JQuery

Here is the HTML code I am working with: <ul class="links main-menu"> <li class="menu-385 active-trail first active"><a class="active" title="" href="/caribootrunk/">HOME</a></li> <li class="menu-386 active"> ...

Analyzing the path of the cursor

Looking to enhance my tracking capabilities by monitoring mouse movements. I have the ability to capture XY coordinates, but understand that they may vary depending on browser size. Are there any other parameters recommended for accurate results? P.S: Be ...