json object to array of strings

json object to array of strings - javascript

I have the following JSON:
{
"tagExpression": "#debug",
"project": "Project_PERSONAL"
}
And I need to convert it to the following array of strings:
[ "tagExpression:#debug",
"project: Project_PERSONAL" ]
This is the code I wrote, and i would like to know maybe is a better way to do it, the code read the JSON from a file, then performs a for loop to convert it:
logger.info(`Updating run configuration base on process args`);
let path = String(processArgvHelper.getArgValue("overrideConf"));
let fileconf = JSON.parse(require("fs").readFileSync(path));
let fileConfStr = String(Object.entries(fileconf)).split(",");
let fileConfArr = [];
for(let i=0;i<fileConfStr.length;i++){
logger.info(`${fileConfStr[i]} -- ${i}`);
if(i === 0 || (i%2)==0){
fileConfArr.push(`${fileConfStr[i]}:${fileConfStr[i+1]}`);
logger.info(`${fileConfStr[i]}:${fileConfStr[i+1]}`)
}
}
Then fileConfArr contains the desired converted array of strings.

You can iterate over the object keys and then map it together
var myObject = {
"tagExpression": "#debug",
"project": "Project_PERSONAL"
}
var result = Object.keys(myObject).map(function(key) {
return key + ':' + myObject[key];
});
console.log(result);

Object.entries(obj).map(([k,v])=> `${k}:${v}`)

Use a for in loop to iterate over an object and then push key and the corresponding value to the resultant array
var input = {
tagExpression: "#debug",
project: "Project_PERSONAL"
};
var out = [];
for (var key in input) {
out.push(`${key}: ${input[key]}`);
}
console.log(out);

Here is my solution for this solution.
const jsonData = `{
"tagExpression": "#debug",
"project": "Project_PERSONAL"
}`;
const obj = JSON.parse(jsonData);
const result = Object.keys(obj).reduce((arr, key) => {
let str = `${key}: ${obj[key]}`;
arr.push(str);
return arr;
}, []);
console.log(result);

First, you extract the keys into an array
Then map each key and return a key and value
Here is the code snippet
let fileconf = {
"tagExpression": "#debug",
"project": "Project_PERSONAL"
}
let arrOfkeys = Object.keys(fileconf);
let fileConfArr = arrOfkeys.map(key => key + fileconf[key]);
fileconf[key] returns the value of that key

I don't know if it's better, or how to define "better" for this, but i would do it like this:
let stringifiedJson = JSON.stringify(fileConf);
let stringWithoutBrackets = stringifiedJson.substring(1, stringifiedJson.length - 1);
let finalArray = stringWithoutBrackets.split(',').map(it => it.replace(/\"/g, ""));

Related

Convert HTML string to JSON array in JavaScript

I have the following string:
let disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
I would like it to be as such:
{
"cid1": "2",
"cid2": "3",
"seqno": "4",
// and so on
}
Here is my current approach:
let n = disposibleHTML.replace('<html>', '');
let splitedArray = n.split("&");
let json = { ...splitedArray }
console.log(json);
Which produces the output below:
{0: 'cid1=1122', 1: 'cid2=2', 2: 'seqno=3', 3: 'tdate=20220616', 4: 'ttime=11355525', 5: 'cname=Test ECSI', 6: 'payment_method=', 7: 'payon=4', 8: 'amount=5', 9: 'productcode=ff', 10: 'PaymentStatus=Approved</html>'}
How can I fix this issue and get the desired output?

You can clean up the string and use URLSearchParams to get the values.
const disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
const result = Object.fromEntries(new URLSearchParams(disposibleHTML.replace(/<\/?html>/g, '').replace(/&/g,'&')));
// everything as strings
console.log(result);
If you want them as numbers you can add some more processing.
const disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
const result = Object.fromEntries(new URLSearchParams(disposibleHTML.replace(/<\/?html>/g, '').replace(/&/g,'&')));
Object.entries(result).forEach(([key, value]) => {
if(isFinite(value)) result[key] = +value;
});
// everything as strings
console.log(result);

I'd use reduce for that:
let disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
let n = disposibleHTML.replace('<html>', '').replace('</html>', '');
let splitedArray = n.split("&");
let json = splitedArray.reduce((p, c) => {let t = c.split('='); p[t[0]] = t[1]; return p;}, {});
console.log(json);

Sightly ugly but should suffice:
const str = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
const obj = JSON.parse("{" + str.replace('<html>', '').replace('</html>', '').replaceAll('amp;', '').split('&').map(e => e.split('=').map(f => `"${f}"`).join(':')).join(',') + "}");
console.log(obj);

I went about it in a different way than others .. Just because:
let disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
let n = disposibleHTML.replace('<html>', '');
n = n.replace('</html>', '');
let splitedArray = n.split("&");
const mainArr = [];
let count = 0;
for (const item of splitedArray) {
item.replace('"', '');
items = item.split('=');
mainArr[count] = items;
count++;
}
let finalJSON = JSON.parse(JSON.stringify(mainArr));
console.log(finalJSON);

Similar idea but perhaps slightly more understandable. Basically we split the string on &amp, thus constructing an array like ["cid1=2", "cid2=3", ...]. Then we loop over each item in the array using Array.reduce, split the the item on the = sign, and append that to an object.
let disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
let n = disposibleHTML.replace('<html>', '').replace('</html>', '');
let splitedArray = n.split("&");
let keyMap = [...splitedArray];
const json = keyMap.reduce((values, item) => {
const [key, value] = item.split("=");
return {
...values,
[key]: value
}
}, {})
console.log(json)

Using String.prototype.replace and .split and other surprisingly nontrivial string operations is not the best way to process string input (in fact, if you ever catch yourself using split it means you're probably doing something wrong, even for CSV (i.e. split(',')) because a CSV value can contain a comma when enclosed in quotes).
Also, you're processing what looks like HTML-encoded application/x-www-form-urlencoded-data contained within a dummy <html> element.
I think the best approach would be to use JavaScript+DOM's built-in HTML decoding abilities, then use URLSearchParams to correctly parse the application/x-www-form-urlencoded data out, then build a JS object by enumerating over name/value pairs, like so:
let disposibleHTML = "<html>cid1=2&cid2=3&seqno=4&tdate=20220616&ttime=11355525&cname=Test E&payment_method=&payon=33&amount=5&productcode=gp&PaymentStatus=Approved</html>";
function run() {
const urlEncodedParams = htmlDecode( disposibleHTML );
const obj = urlParamsToJSObject( urlEncodedParams );
console.log( "urlencoding to JS object: %o", obj );
}
run();
function htmlDecode( html ) {
const el = document.createElement('div')
el.innerHTML = disposibleHTML;
return el.textContent;
}
function urlParamsToJSObject( p ) {
let parsed;
try {
parsed = new URLSearchParams( p );
}
catch( err ) {
console.error( err );
throw new Error( "Couldn't parse URL-encoded text: " + err );// err; // TODO: Better handling?
}
//
const obj = {};
for( const key of parsed.keys() ) {
const firstValue = parsed.get( key );
obj[ key ] = firstValue;
}
return obj;
}

Create new array with Average of same keys in an array of objects

I have an array of object as follows:
var arr=[ {"jan":2},{"jan":5},{"feb":3},{"feb":1}];
Their will be N number of objects with any combination keys jan & feb is just an example.
I need to find average of objects with similar keys so that resultant array looks like this :
var newArr=[{"jan":3.5},{"feb":2}];
Looking to achieve this without reduce method in JavaScript.
I tried to seperate out objects with similar keys so that ic an sum and average them and push in to a new aray. something like this :
arr.forEach(a=>{
console.log(Object.keys(a))
console.log(arr.filter(ar=>ar.hasOwnProperty(Object.keys(a)[0])))
})
But it creates multiple groups for same keys like this in console.
[ {"jan":2},{"jan":5} ]
[ {"jan":2},{"jan":5} ]
[ {"feb":3},{"feb":1} ]
[ {"feb":3},{"feb":1} ]

A code without using reduce . A bit length though but easy to understand
We are using two objects , one is to store the count of the keys and other is for storing the total of the keys.
result object has the average.
var arr=[ {"jan":2},{"jan":5},{"feb":3},{"feb":1}];
var count = {};
var total = {};
arr.forEach(obj => {
var key = Object.keys(obj)[0];
if(count.hasOwnProperty(key)){
count[key]=count[key]+1;
} else {
count[key]=1;
}
if(total.hasOwnProperty(key)){
total[key]=total[key]+obj[key];
} else {
total[key]=obj[key];
}
})
var result = {}
Object.keys(total).forEach(key => {
result[key] = total[key]/count[key];
})
console.log(result)

Similar to the answer above, but makes use of a map:
var arr=[ {"jan":2},{"jan":5},{"feb":3},{"feb":1}];
let map = new Map();
let keyCount = {};
arr.forEach(e => {
let key = Object.keys(e)[0];
let value = Object.values(e)[0];
if (map.get(key) !== undefined) {
map.set(key, map.get(key) + value);
keyCount[key] = keyCount[key] + 1;
} else {
map.set(key, value);
keyCount[key] = 1;
}
});
let newArr = [];
for (let e of map.entries()) {
let obj = {};
obj[e[0]] = e[1] / keyCount[e[0]];
newArr.push(obj);
}
console.log(newArr);

Convert object into 2-d array but remove keys

I am trying to convert the below this:
let JSON = [
{1:"hello",2:"goodbye",3:"bonjour"},
{4:"hello2",5:"goodbye2",6:"bonjour2"},
{7:"hello3",8:"goodbye3",9:"bonjour3"},
{10:"hello4",11:"goodbye4",12:"bonjour4"}
]
to this:
let arr = [
["hello","goodbye","bonjour"],
["hello2","goodbye2","bonjour2"],
["hello3","goodbye3","bonjour3"],
["hello4","goodbye4","bonjour4"]
]
I have tried:
var row1 = JSON.map(function(e) {
return [ e.1, e.2, e.3];
});
var row2 = JSON.map(function(e) {
return [ e.4, e.5, e.6];
});
var row3 = JSON.map(function(e) {
return [ e.7, e.8, e.9];
});
var row4 = JSON.map(function(e) {
return [ e.10, e.11, e.12];
let array = [row1,row2,row3,row4]
But cannot get anything working. I would appreciate any help :)

Try this one:
let JSON = [
{1:"hello",2:"goodbye",3:"bonjour"},
{4:"hello2",5:"goodbye2",6:"bonjour2"},
{7:"hello3",8:"goodbye3",9:"bonjour3"},
{10:"hello4",11:"goodbye4",12:"bonjour4"}
];
let arr = JSON.map(obj => {
return Object.values(obj);
});

You can use a standard for loop to iterate the object key's and push the object values into an array(ordered) which you return, all within the callback of Array.map. Also, your problem is that Array.map works on every item of the array, not just one at a time. that is why your code doesn't work the way you expected.
let JSON = [
{1:"hello",2:"goodbye",3:"bonjour"},
{4:"hello2",5:"goodbye2",6:"bonjour2"},
{7:"hello3",8:"goodbye3",9:"bonjour3"},
{10:"hello4",11:"goodbye4",12:"bonjour4"}
]
const result = JSON.map(a=>{
const b = [];
for(var k in a){
b.push(a[k]);
}
return b;
});
console.log(result);

Given your sample data, it seems you could simply use Object.values:
let original = [
{1:"hello",2:"goodbye",3:"bonjour"},
{4:"hello2",5:"goodbye2",6:"bonjour2"},
{7:"hello3",8:"goodbye3",9:"bonjour3"},
{10:"hello4",11:"goodbye4",12:"bonjour4"}
]
var array = original.map(Object.values);
console.log(array);
This works because the order of elements in each object is the same as the order you want to achieve in the result array.
If you this is not always the case (e.g. you have {12:"bonjour4",11:"goodbye4",10:"hello4"} and you still want to return ["hello4","goodbye4","bonjour4"]) you can sort entries by their keys first. For example:
let original = [
{1:"hello",2:"goodbye",3:"bonjour"},
{4:"hello2",5:"goodbye2",6:"bonjour2"},
{7:"hello3",8:"goodbye3",9:"bonjour3"},
{12:"bonjour4",11:"goodbye4",10:"hello4"}
]
var array = original
.map(obj => Object
.entries(obj)
.sort(([k1], [k2]) => k1 - k2)
.map(([_, v]) => v));
console.log(array);
As a side note, I'd caution you against using the name JSON since this will hide the built-in JSON object.

regex to find pairs in array

I would like to parse that string:
[[abc.d.2,mcnv.3.we],[abec.d.2,mcnv.4.we],[abhc.d.2,mcnv.5.we]]
In order to have a key value (JSON)
{
"abc.d.2": "mcnv.3.we",
"abec.d.2: "mcnv.4.we",
"abhc.d.2": "mcnv.5.we"
}
First I would like to check if string can be parse to make it key=>value.
How can I check the string if it contains pairs?
Thanks

You can try something like this:
Approach 1:
Idea:
Update the regex to have more specific characters. In your case, alphanumeric and period.
Get all matching elements from string.
All odd values are keys and even matches are values.
Loop over matches and create an object.
const str = "[[abc.d.2,mcnv.3.we],[abec.d.2,mcnv.4.we],[abhc.d.2,mcnv.5.we]]";
const matches = str.match(/[\w\.\d]+/gi);
const output = {};
for(var i = 0; i< matches.length; i+=2) {
output[matches[i]] = matches[i+1];
}
console.log(output)
Approach 2:
Idea:
Write a regex to capture each individual group: [...:...]
Then eliminate braces [ and ].
Split string using comma ,.
First part is your key. Second is your value.
const str = "[[abc.d.2,mcnv.3.we],[abec.d.2,mcnv.4.we],[abhc.d.2,mcnv.5.we]]";
const matches = str.match(/\[([\w\d\.,]*)\]/gi);
const output = matches.reduce((obj, match) => {
const parts = match.substring(1, match.length - 1).split(',');
obj[parts[0]] = parts[1];
return obj;
}, {})
console.log(output)
In above approach, you can also include Map. The iteration can be bit confusing initially, but you can try.
const str = "[[abc.d.2,mcnv.3.we],[abec.d.2,mcnv.4.we],[abhc.d.2,mcnv.5.we]]";
const matches = str.match(/\[([\w\d\.,]*)\]/gi);
const output = matches.reduce((obj, match) => {
const parts = match.substring(1, match.length - 1).split(',');
obj.set(...parts)
return obj;
}, new Map())
for (const [k, v] of output.entries()) {
console.log(`Key: ${k}, value: ${v}`)
}

Parse the array as JSON, iterate over the array, adding entries to the target object as you go, watch out for duplicate keys:
let dict_target = {}; // The target dictionary,
let src, arysrc, proceed = false;
try {
src = "[[abc.d.2,mcnv.3.we],[abec.d.2,mcnv.4.we],[abhc.d.2,mcnv.5.we]]"
.replace(/,/g, '","')
.replace(/\]","\[/g, '"],["')
.replace(/^\[\[/, '[["')
.replace(/\]\]$/, '"]]')
;
arysrc = JSON.parse(src);
proceed = true; // Could parse the data, can carry on with processing the data
} catch (e) {
console.log(`Source data unparseable, error '${e.message}'.`);
}
if (proceed) {
arysrc.forEach ( (a_item, n_idx) => {
if (dict_target.hasOwnProperty(a_item[0])) {
// add any tests and processing for duplicate keys/value pairs here
if (typeof dict_target[a_item[0]] === "string") {
dict_target[a_item[0]] = [ dict_target[a_item[0]] ];
}
dict_target[a_item[0]].push(a_item[1]);
}
else {
dict_target[a_item[0]] = a_item[1];
}
});
} // if -- proceed

My coding golf solution...
const parse = (str) => {
let obj = {};
str.replace(
/\[([^\[,]+),([^\],]+)\]/g,
(m, k, v) => obj[k] = v
);
return obj;
};
Advantages:
More Permissive of arbitrary chars
More Tolerant of missing values
Avoids disposable objects for GC
Disadvantages:
More Permissive of arbitrary chars!
This is not a proper parser...
Does not have context, just [key,val]
I actually wanted to post the following as my answer... but I think it'll get me in trouble :P
const parse=(str,obj={})=>
!str.replace(/\[([^\[,]+),([^\],]+)\]/g,(m,k,v)=>obj[k]=v)||obj;

Here's the code which validates the string first and outputs the result. Not at all optimal but does the task just fine.
var string = '[[abc.d.2,mcnv.3.we],[abec.d.2,mcnv.4.we],[abhc.d.2,mcnv.5.we]]';
var result = (/^\[(\[.*\..*\..*\,.*\..*\..*\]\,)*\[(.*\..*\..*\,.*\..*\..*)\]\]$/g).exec(string);
if (result) {
var r1 = result[1].replace(/\[|\]/g, '').split(',');
var r2 = result[2].split(',');
var output = {};
for (var i = 0; i < r1.length -1; i +=2) {
output[r1[i]] = r1[i+1];
}
output[r2[0]] = r2[1];
console.log(output);
} else {
console.log('invalid string');
}

convert serialized form to individual post items [duplicate]

This question already has answers here:
How can I get query string values in JavaScript?
(73 answers)
Closed 1 year ago.
I have a string like this:
abc=foo&def=%5Basf%5D&xyz=5
How can I convert it into a JavaScript object like this?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}

In the year 2021... Please consider this obsolete.
Edit
This edit improves and explains the answer based on the comments.
var search = location.search.substring(1);
JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
Example
Parse abc=foo&def=%5Basf%5D&xyz=5 in five steps:
decodeURI: abc=foo&def=[asf]&xyz=5
Escape quotes: same, as there are no quotes
Replace &: abc=foo","def=[asf]","xyz=5
Replace =: abc":"foo","def":"[asf]","xyz":"5
Suround with curlies and quotes: {"abc":"foo","def":"[asf]","xyz":"5"}
which is legal JSON.
An improved solution allows for more characters in the search string. It uses a reviver function for URI decoding:
var search = location.search.substring(1);
JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g,'":"') + '"}', function(key, value) { return key===""?value:decodeURIComponent(value) })
Example
search = "abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar";
gives
Object {abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"}
Original answer
A one-liner:
JSON.parse('{"' + decodeURI("abc=foo&def=%5Basf%5D&xyz=5".replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}')

2022 ES6/7/8 and on approach
Starting ES6 and on, Javascript offers several constructs in order to create a performant solution for this issue.
This includes using URLSearchParams and iterators
let params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
params.get("abc"); // "foo"
Should your use case requires you to actually convert it to object, you can implement the following function:
function paramsToObject(entries) {
const result = {}
for(const [key, value] of entries) { // each 'entry' is a [key, value] tupple
result[key] = value;
}
return result;
}
Basic Demo
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const entries = urlParams.entries(); //returns an iterator of decoded [key,value] tuples
const params = paramsToObject(entries); //{abc:"foo",def:"[asf]",xyz:"5"}
Using Object.fromEntries and spread
We can use Object.fromEntries, replacing paramsToObject with Object.fromEntries(entries).
The value pairs to iterate over are the list name-value pairs with the
key being the name and the value being the value.
Since URLParams, returns an iterable object, using the spread operator instead of calling .entries will also yield entries per its spec:
const urlParams = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5');
const params = Object.fromEntries(urlParams); // {abc: "foo", def: "[asf]", xyz: "5"}
Note: All values are automatically strings as per the URLSearchParams spec
Multiple same keys
As #siipe pointed out, strings containing multiple same-key values will be coerced into the last available value: foo=first_value&foo=second_value will in essence become: {foo: "second_value"}.
As per this answer: https://stackoverflow.com/a/1746566/1194694 there's no spec for deciding what to do with it and each framework can behave differently.
A common use case will be to join the two same values into an array, making the output object into:
{foo: ["first_value", "second_value"]}
This can be achieved with the following code:
const groupParamsByKey = (params) => [...params.entries()].reduce((acc, tuple) => {
// getting the key and value from each tuple
const [key, val] = tuple;
if(acc.hasOwnProperty(key)) {
// if the current key is already an array, we'll add the value to it
if(Array.isArray(acc[key])) {
acc[key] = [...acc[key], val]
} else {
// if it's not an array, but contains a value, we'll convert it into an array
// and add the current value to it
acc[key] = [acc[key], val];
}
} else {
// plain assignment if no special case is present
acc[key] = val;
}
return acc;
}, {});
const params = new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5&def=dude');
const output = groupParamsByKey(params) // {abc: "foo", def: ["[asf]", "dude"], xyz: 5}

One liner. Clean and simple.
const params = Object.fromEntries(new URLSearchParams(location.search));
For your specific case, it would be:
const str = 'abc=foo&def=%5Basf%5D&xyz=5';
const params = Object.fromEntries(new URLSearchParams(str));
console.log(params);

2023 One-Liner Approach
For the general case where you want to parse query params to an object:
Object.fromEntries(new URLSearchParams(location.search));
For your specific case:
Object.fromEntries(new URLSearchParams('abc=foo&def=%5Basf%5D&xyz=5'));

Split on & to get name/value pairs, then split each pair on =. Here's an example:
var str = "abc=foo&def=%5Basf%5D&xy%5Bz=5"
var obj = str.split("&").reduce(function(prev, curr, i, arr) {
var p = curr.split("=");
prev[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
return prev;
}, {});
Another approach, using regular expressions:
var obj = {};
str.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
obj[decodeURIComponent(key)] = decodeURIComponent(value);
});
This is adapted from John Resig's "Search and Don’t Replace".

The proposed solutions I found so far do not cover more complex scenarios.
I needed to convert a query string like
https://random.url.com?Target=Offer&Method=findAll&filters%5Bhas_goals_enabled%5D%5BTRUE%5D=1&filters%5Bstatus%5D=active&fields%5B%5D=id&fields%5B%5D=name&fields%5B%5D=default_goal_name
into an object like:
{
"Target": "Offer",
"Method": "findAll",
"fields": [
"id",
"name",
"default_goal_name"
],
"filters": {
"has_goals_enabled": {
"TRUE": "1"
},
"status": "active"
}
}
OR:
https://random.url.com?Target=Report&Method=getStats&fields%5B%5D=Offer.name&fields%5B%5D=Advertiser.company&fields%5B%5D=Stat.clicks&fields%5B%5D=Stat.conversions&fields%5B%5D=Stat.cpa&fields%5B%5D=Stat.payout&fields%5B%5D=Stat.date&fields%5B%5D=Stat.offer_id&fields%5B%5D=Affiliate.company&groups%5B%5D=Stat.offer_id&groups%5B%5D=Stat.date&filters%5BStat.affiliate_id%5D%5Bconditional%5D=EQUAL_TO&filters%5BStat.affiliate_id%5D%5Bvalues%5D=1831&limit=9999
INTO:
{
"Target": "Report",
"Method": "getStats",
"fields": [
"Offer.name",
"Advertiser.company",
"Stat.clicks",
"Stat.conversions",
"Stat.cpa",
"Stat.payout",
"Stat.date",
"Stat.offer_id",
"Affiliate.company"
],
"groups": [
"Stat.offer_id",
"Stat.date"
],
"limit": "9999",
"filters": {
"Stat.affiliate_id": {
"conditional": "EQUAL_TO",
"values": "1831"
}
}
}
I compiled and adapted multiple solutions into one that actually works:
CODE:
var getParamsAsObject = function (query) {
query = query.substring(query.indexOf('?') + 1);
var re = /([^&=]+)=?([^&]*)/g;
var decodeRE = /\+/g;
var decode = function (str) {
return decodeURIComponent(str.replace(decodeRE, " "));
};
var params = {}, e;
while (e = re.exec(query)) {
var k = decode(e[1]), v = decode(e[2]);
if (k.substring(k.length - 2) === '[]') {
k = k.substring(0, k.length - 2);
(params[k] || (params[k] = [])).push(v);
}
else params[k] = v;
}
var assign = function (obj, keyPath, value) {
var lastKeyIndex = keyPath.length - 1;
for (var i = 0; i < lastKeyIndex; ++i) {
var key = keyPath[i];
if (!(key in obj))
obj[key] = {}
obj = obj[key];
}
obj[keyPath[lastKeyIndex]] = value;
}
for (var prop in params) {
var structure = prop.split('[');
if (structure.length > 1) {
var levels = [];
structure.forEach(function (item, i) {
var key = item.replace(/[?[\]\\ ]/g, '');
levels.push(key);
});
assign(params, levels, params[prop]);
delete(params[prop]);
}
}
return params;
};

A concise solution:
location.search
.slice(1)
.split('&')
.map(p => p.split('='))
.reduce((obj, pair) => {
const [key, value] = pair.map(decodeURIComponent);
obj[key] = value;
return obj;
}, {});

This is the simple version, obviously you'll want to add some error checking:
var obj = {};
var pairs = queryString.split('&');
for(i in pairs){
var split = pairs[i].split('=');
obj[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
}

For Node JS, you can use the Node JS API querystring:
const querystring = require('querystring');
querystring.parse('abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar');
// returns the object
Documentation: https://nodejs.org/api/querystring.html

I found $.String.deparam the most complete pre built solution (can do nested objects etc.). Check out the documentation.

Another solution based on the latest standard of URLSearchParams (https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
function getQueryParamsObject() {
const searchParams = new URLSearchParams(location.search.slice(1));
return searchParams
? _.fromPairs(Array.from(searchParams.entries()))
: {};
}
Please note that this solution is making use of
Array.from (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
and _.fromPairs (https://lodash.com/docs#fromPairs) of lodash for the sake of simplicity.
It should be easy to create a more compatible solution since you have access to searchParams.entries() iterator.

I had the same problem, tried the solutions here, but none of them really worked, since I had arrays in the URL parameters, like this:
?param[]=5&param[]=8&othr_param=abc&param[]=string
So I ended up writing my own JS function, which makes an array out of the param in URI:
/**
* Creates an object from URL encoded data
*/
var createObjFromURI = function() {
var uri = decodeURI(location.search.substr(1));
var chunks = uri.split('&');
var params = Object();
for (var i=0; i < chunks.length ; i++) {
var chunk = chunks[i].split('=');
if(chunk[0].search("\\[\\]") !== -1) {
if( typeof params[chunk[0]] === 'undefined' ) {
params[chunk[0]] = [chunk[1]];
} else {
params[chunk[0]].push(chunk[1]);
}
} else {
params[chunk[0]] = chunk[1];
}
}
return params;
}

One of the simplest way to do this using URLSearchParam interface.
Below is the working code snippet:
let paramObj={},
querystring=window.location.search,
searchParams = new URLSearchParams(querystring);
//*** :loop to add key and values to the param object.
searchParams.forEach(function(value, key) {
paramObj[key] = value;
});

There is quite simple and incorrect answer with ES6:
console.log(
Object.fromEntries(new URLSearchParams(`abc=foo&def=%5Basf%5D&xyz=5`))
);
But this one line code do not cover multiple same keys, you have to use something more complicated:
function parseParams(params) {
const output = [];
const searchParams = new URLSearchParams(params);
// Set will return only unique keys()
new Set([...searchParams.keys()])
.forEach(key => {
output[key] = searchParams.getAll(key).length > 1 ?
searchParams.getAll(key) : // get multiple values
searchParams.get(key); // get single value
});
return output;
}
console.log(
parseParams('abc=foo&cars=Ford&cars=BMW&cars=Skoda&cars=Mercedes')
)
Code will generate follow structure:
[
abc: "foo"
cars: ["Ford", "BMW", "Skoda", "Mercedes"]
]

Using ES6, URL API and URLSearchParams API.
function objectifyQueryString(url) {
let _url = new URL(url);
let _params = new URLSearchParams(_url.search);
let query = Array.from(_params.keys()).reduce((sum, value)=>{
return Object.assign({[value]: _params.get(value)}, sum);
}, {});
return query;
}

ES6 one liner (if we can call it that way seeing the long line)
[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})

One simple answer with build in native Node module.(No third party npm modules)
The querystring module provides utilities for parsing and formatting URL query strings. It can be accessed using:
const querystring = require('querystring');
const body = "abc=foo&def=%5Basf%5D&xyz=5"
const parseJSON = querystring.parse(body);
console.log(parseJSON);

Pretty easy using the URLSearchParams JavaScript Web API,
var paramsString = "abc=foo&def=%5Basf%5D&xyz=5";
//returns an iterator object
var searchParams = new URLSearchParams(paramsString);
//Usage
for (let p of searchParams) {
console.log(p);
}
//Get the query strings
console.log(searchParams.toString());
//You can also pass in objects
var paramsObject = {abc:"forum",def:"%5Basf%5D",xyz:"5"}
//returns an iterator object
var searchParams = new URLSearchParams(paramsObject);
//Usage
for (let p of searchParams) {
console.log(p);
}
//Get the query strings
console.log(searchParams.toString());
##Useful Links
URLSearchParams - Web APIs | MDN
Easy URL Manipulation with URLSearchParams | Web
| Google Developers
NOTE: Not Supported in IE

There is no native solution that I'm aware of. Dojo has a built-in unserialization method if you use that framework by chance.
Otherwise you can implement it yourself rather simply:
function unserialize(str) {
str = decodeURIComponent(str);
var chunks = str.split('&'),
obj = {};
for(var c=0; c < chunks.length; c++) {
var split = chunks[c].split('=', 2);
obj[split[0]] = split[1];
}
return obj;
}
edit: added decodeURIComponent()

/**
* Parses and builds Object of URL query string.
* #param {string} query The URL query string.
* #return {!Object<string, string>}
*/
function parseQueryString(query) {
if (!query) {
return {};
}
return (/^[?#]/.test(query) ? query.slice(1) : query)
.split('&')
.reduce((params, param) => {
const item = param.split('=');
const key = decodeURIComponent(item[0] || '');
const value = decodeURIComponent(item[1] || '');
if (key) {
params[key] = value;
}
return params;
}, {});
}
console.log(parseQueryString('?v=MFa9pvnVe0w&ku=user&from=89&aw=1'))
see log

There's a lightweight library called YouAreI.js that's tested and makes this really easy.
YouAreI = require('YouAreI')
uri = new YouAreI('http://user:pass#www.example.com:3000/a/b/c?d=dad&e=1&f=12.3#fragment');
uri.query_get() => { d: 'dad', e: '1', f: '12.3' }

If you are using URI.js, you can use:
https://medialize.github.io/URI.js/docs.html#static-parseQuery
var result = URI.parseQuery("?foo=bar&hello=world&hello=mars&bam=&yup");
result === {
foo: "bar",
hello: ["world", "mars"],
bam: "",
yup: null
};

console.log(decodeURI('abc=foo&def=%5Basf%5D&xyz=5')
.split('&')
.reduce((result, current) => {
const [key, value] = current.split('=');
result[key] = value;
return result
}, {}))

This seems to be the best solution as it takes multiple parameters of the same name into consideration.
function paramsToJSON(str) {
var pairs = str.split('&');
var result = {};
pairs.forEach(function(pair) {
pair = pair.split('=');
var name = pair[0]
var value = pair[1]
if( name.length )
if (result[name] !== undefined) {
if (!result[name].push) {
result[name] = [result[name]];
}
result[name].push(value || '');
} else {
result[name] = value || '';
}
});
return( result );
}
something
paramsToJSON("x=1&x=2&x=3&y=blah");
console yields => {x: Array[3], y: "blah"} where x is an array as is proper JSON
I later decided to convert it to a jQuery plugin too...
$.fn.serializeURLParams = function() {
var result = {};
if( !this.is("a") || this.attr("href").indexOf("?") == -1 )
return( result );
var pairs = this.attr("href").split("?")[1].split('&');
pairs.forEach(function(pair) {
pair = pair.split('=');
var name = decodeURI(pair[0])
var value = decodeURI(pair[1])
if( name.length )
if (result[name] !== undefined) {
if (!result[name].push) {
result[name] = [result[name]];
}
result[name].push(value || '');
} else {
result[name] = value || '';
}
});
return( result )
}
something
$("a").serializeURLParams();
console yields => {x: Array[3], y: "blah"} where x is an array as is proper JSON
Now, the first will accept the parameters only but the jQuery plugin will take the whole url and return the serialized parameters.

Here's one I use:
var params = {};
window.location.search.substring(1).split('&').forEach(function(pair) {
pair = pair.split('=');
if (pair[1] !== undefined) {
var key = decodeURIComponent(pair[0]),
val = decodeURIComponent(pair[1]),
val = val ? val.replace(/\++/g,' ').trim() : '';
if (key.length === 0) {
return;
}
if (params[key] === undefined) {
params[key] = val;
}
else {
if ("function" !== typeof params[key].push) {
params[key] = [params[key]];
}
params[key].push(val);
}
}
});
console.log(params);
Basic usage, eg.
?a=aa&b=bb
Object {a: "aa", b: "bb"}
Duplicate params, eg.
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}
Missing keys, eg.
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}
Missing values, eg.
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}
The above JSON/regex solutions throw a syntax error on this wacky url:
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}

Here's my quick and dirty version, basically its splitting up the URL parameters separated by '&' into array elements, and then iterates over that array adding key/value pairs separated by '=' into an object. I'm using decodeURIComponent() to translate the encoded characters to their normal string equivalents (so %20 becomes a space, %26 becomes '&', etc):
function deparam(paramStr) {
let paramArr = paramStr.split('&');
let paramObj = {};
paramArr.forEach(e=>{
let param = e.split('=');
paramObj[param[0]] = decodeURIComponent(param[1]);
});
return paramObj;
}
example:
deparam('abc=foo&def=%5Basf%5D&xyz=5')
returns
{
abc: "foo"
def:"[asf]"
xyz :"5"
}
The only issue is that xyz is a string and not a number (due to using decodeURIComponent()), but beyond that its not a bad starting point.

//under ES6
const getUrlParamAsObject = (url = window.location.href) => {
let searchParams = url.split('?')[1];
const result = {};
//in case the queryString is empty
if (searchParams!==undefined) {
const paramParts = searchParams.split('&');
for(let part of paramParts) {
let paramValuePair = part.split('=');
//exclude the case when the param has no value
if(paramValuePair.length===2) {
result[paramValuePair[0]] = decodeURIComponent(paramValuePair[1]);
}
}
}
return result;
}

If you need recursion, you can use the tiny js-extension-ling library.
npm i js-extension-ling
const jsx = require("js-extension-ling");
console.log(jsx.queryStringToObject("a=1"));
console.log(jsx.queryStringToObject("a=1&a=3"));
console.log(jsx.queryStringToObject("a[]=1"));
console.log(jsx.queryStringToObject("a[]=1&a[]=pomme"));
console.log(jsx.queryStringToObject("a[0]=one&a[1]=five"));
console.log(jsx.queryStringToObject("http://blabla?foo=bar&number=1234"));
console.log(jsx.queryStringToObject("a[fruits][red][]=strawberry"));
console.log(jsx.queryStringToObject("a[fruits][red][]=strawberry&a[1]=five&a[fruits][red][]=cherry&a[fruits][yellow][]=lemon&a[fruits][yellow][688]=banana"));
This will output something like this:
{ a: '1' }
{ a: '3' }
{ a: { '0': '1' } }
{ a: { '0': '1', '1': 'pomme' } }
{ a: { '0': 'one', '1': 'five' } }
{ foo: 'bar', number: '1234' }
{
a: { fruits: { red: { '0': 'strawberry' } } }
}
{
a: {
'1': 'five',
fruits: {
red: { '0': 'strawberry', '1': 'cherry' },
yellow: { '0': 'lemon', '688': 'banana' }
}
}
}
Note: it's based on locutus parse_str function (https://locutus.io/php/strings/parse_str/).

FIRST U NEED TO DEFINE WHAT'S A GET VAR:
function getVar()
{
this.length = 0;
this.keys = [];
this.push = function(key, value)
{
if(key=="") key = this.length++;
this[key] = value;
this.keys.push(key);
return this[key];
}
}
Than just read:
function urlElement()
{
var thisPrototype = window.location;
for(var prototypeI in thisPrototype) this[prototypeI] = thisPrototype[prototypeI];
this.Variables = new getVar();
if(!this.search) return this;
var variables = this.search.replace(/\?/g,'').split('&');
for(var varI=0; varI<variables.length; varI++)
{
var nameval = variables[varI].split('=');
var name = nameval[0].replace(/\]/g,'').split('[');
var pVariable = this.Variables;
for(var nameI=0;nameI<name.length;nameI++)
{
if(name.length-1==nameI) pVariable.push(name[nameI],nameval[1]);
else var pVariable = (typeof pVariable[name[nameI]] != 'object')? pVariable.push(name[nameI],new getVar()) : pVariable[name[nameI]];
}
}
}
and use like:
var mlocation = new urlElement();
mlocation = mlocation.Variables;
for(var key=0;key<mlocation.keys.length;key++)
{
console.log(key);
console.log(mlocation[mlocation.keys[key]];
}

I needed to also deal with + in the query part of the URL (decodeURIComponent doesn't), so I adapted Wolfgang's code to become:
var search = location.search.substring(1);
search = search?JSON.parse('{"' + search.replace(/\+/g, ' ').replace(/&/g, '","').replace(/=/g,'":"') + '"}',
function(key, value) { return key===""?value:decodeURIComponent(value)}):{};
In my case, I'm using jQuery to get URL-ready form parameters, then this trick to build an object out of it and I can then easily update parameters on the object and rebuild the query URL, e.g.:
var objForm = JSON.parse('{"' + $myForm.serialize().replace(/\+/g, ' ').replace(/&/g, '","').replace(/=/g,'":"') + '"}',
function(key, value) { return key===""?value:decodeURIComponent(value)});
objForm.anyParam += stringToAddToTheParam;
var serializedForm = $.param(objForm);

Develop Reference

JavaScript is the programming language of the Web.

json object to array of strings - javascript

You can iterate over the object keys and then map it together var myObject = { "tagExpression": "#debug", "project": "Project_PERSONAL" } var result = Object.keys(myObject).map(function(key) { return key + ':' + myObject[key]; }); console.log(result);

Object.entries(obj).map(([k,v])=> `${k}:${v}`)

Use a for in loop to iterate over an object and then push key and the corresponding value to the resultant array var input = { tagExpression: "#debug", project: "Project_PERSONAL" }; var out = []; for (var key in input) { out.push(`${key}: ${input[key]}`); } console.log(out);

Here is my solution for this solution. const jsonData = `{ "tagExpression": "#debug", "project": "Project_PERSONAL" }`; const obj = JSON.parse(jsonData); const result = Object.keys(obj).reduce((arr, key) => { let str = `${key}: ${obj[key]}`; arr.push(str); return arr; }, []); console.log(result);

Related

Convert HTML string to JSON array in JavaScript

Create new array with Average of same keys in an array of objects

Convert object into 2-d array but remove keys

regex to find pairs in array

convert serialized form to individual post items [duplicate]

Categories

Resources