Building a query in Javascript by utilizing object keys and values: a step-by-step guide

Question

Building a query in Javascript by utilizing object keys and values: a step-by-step guide

I am looking to transform an object with various keys and values into a query string format, for example:

obj1: {
  abc: "Abc",
  id: 1,
  address: "something"
}.

The challenge is that this object is generated dynamically, so the number of keys in it can vary. For instance, another dynamically created object could be:

obj1: {
  test: "123",
  test2: "3333"
}

No matter what the structure of the server's response object is, I need to convert it into a query string, like:

query1 = "test:'123'and test2: '3333'"
query2 = "abc:'Abc' and id: 1 and address: 'something'"

I could attempt something like:

Object.keys(obj1)[0]: obj1[Object.keys(obj1)[0]]

This approach would yield:

abc:'Abc'

However, due to the dynamic nature of the object's keys and length, I am struggling to figure out how to concatenate these pairs into a single string. Any suggestions?

javascript

Answer 1

Answer №1

Despite a few minor inconsistencies in the formatting, you can make use of Object.entries, Array#map, and Array#join in the following manner:

const objToQuery = o =>
  Object.entries(o).map(([k, v]) => 
    `${k}: ` + (typeof v === "number" ? v : `'${v}'`)
  ).join(" and ")
;

const obj1 = {
  abc: "Abc",
  id: 1,
  address: "something"
};
const obj2 = {
  test: "123",
  test2: "3333"
};
console.log(objToQuery(obj1));
console.log(objToQuery(obj2));

Answer 2

Despite a few minor inconsistencies in the formatting, you can make use of Object.entries, Array#map, and Array#join in the following manner:

const objToQuery = o =>
  Object.entries(o).map(([k, v]) => 
    `${k}: ` + (typeof v === "number" ? v : `'${v}'`)
  ).join(" and ")
;

const obj1 = {
  abc: "Abc",
  id: 1,
  address: "something"
};
const obj2 = {
  test: "123",
  test2: "3333"
};
console.log(objToQuery(obj1));
console.log(objToQuery(obj2));

Answer 3

Answer №2

Getting a little creative by utilizing the built-in URLSearchParams(), then performing some manipulation to replace the characters = and &. It's worth noting that the necessity of quotation marks may vary depending on your specific requirements, as another solution could be more efficient if quotation marks are needed.

const obj1 = {
  abc: "Abc",
  id: 1,
  address: "something"
}

const objToQuery = o => {
  return (new URLSearchParams(Object.entries(o)))
    .toString().replace(/=/g, ': ').replace(/&/g, ' and ')
}



console.log(objToQuery(obj1))

Answer 4

Getting a little creative by utilizing the built-in URLSearchParams(), then performing some manipulation to replace the characters = and &. It's worth noting that the necessity of quotation marks may vary depending on your specific requirements, as another solution could be more efficient if quotation marks are needed.

const obj1 = {
  abc: "Abc",
  id: 1,
  address: "something"
}

const objToQuery = o => {
  return (new URLSearchParams(Object.entries(o)))
    .toString().replace(/=/g, ': ').replace(/&/g, ' and ')
}



console.log(objToQuery(obj1))

Building a query in Javascript by utilizing object keys and values: a step-by-step guide

Answer №1

Answer №2

Similar questions

Attempting to set up an Ajax webform with various outputs, but encountering issues with functionality

The supertest request body cannot be found

Having trouble establishing a new local Windows directory structure with Selenium

Utilizing Filters to Dynamically Highlight and Unhighlight HTML in Angular

Issue occurred while executing the fs.rename() function in a loop in Node.js

Switch between two AppBars simultaneously while scrolling in Material UI

The Angular 5 keyup event is being triggered twice

How can I trigger the opening of an iframe without relying on jQuery when the user clicks on it?

Tips for transferring data to an entry component in Angular 2 using ng-bootstrap modal

I specified Authorization Bearer in the Fetch API configuration, however, the Request Headers do not contain the necessary Authorization information

Discovering the audio file URL hidden within javascript code

Regular expressions: Capturing characters that come after and before a designated symbol

Is there a way to group together select values in a dropdown menu under a shared category?

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

In just a single line of code, you can iterate through a Record object and retrieve an array of DOM elements

Generating a dynamic list by utilizing database data once a button has been clicked

Efficient Ways to pass information to an Object within a nested function

Context menu for OpenLayers 3 maps

Struggling to convert my VueJS component from JavaScript to TypeScript, feeling a bit lost

Are you familiar with manipulating Arrays or Objects in jQuery?