javascript destructuring without declaring variables

Question

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

console.log(data);

const {squadName, homeTown, formed, secretBase, active} = data;

console.log(squadName, homeTown, formed, secretBase, active)

In the above scenario, how do I get squadName, homeTown, formed, secretBase, active into variables with the same names without having to hard code the const {squadName, homeTown, formed, secretBase, active} = data; part?

Is it possible to create the const {squadName, homeTown, formed, secretBase, active} part dynamically from the json data by using it's keys and the use it like const {squadName, homeTown, formed, secretBase, active} = data

is storing them into an array considerable? – Karl L Jun 23 '20 at 04:27 — Karl L, Jun 23 '20 at 04:27

Karl L · Answer 1 · 2020-06-23T05:56:06.140

you can do a hacky way like:

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

for (let [key, value] of Object.entries(data)) {
  eval(key+"=value")
}

console.log(squadName,homeTown,formed,secretBase,active)

It simply evaluates the expression in a string form.

or do this:

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);


for (let [key, value] of Object.entries(data)) {
   window[key] = value
}

console.log(squadName,homeTown,formed,secretBase,active)

This solves the problem, but `eval` is not recommended: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Never_use_eval! — Bruno Monteiro, Jun 23 '20 at 04:51

score 0 · Answer 2 · answered Jun 23 '20 at 04:39

You can access those variables immediately after parsing.

let json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

let data = JSON.parse(json);

console.log(data.squadName);
console.log(data.homeTown);
console.log(data.formed);
console.log(data.secretBase);
console.log(data.active);

score 0 · Answer 3 · answered Jun 23 '20 at 04:47

I am not sure what is your use case, but if you just need those variables globally, you can set them from the window object (see this post: https://stackoverflow.com/a/5117153/6080254)

What you could do is loop through your data and create the variables:

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

Object.entries(data).forEach((item) => {
  window[item[0]] = item[1]
})

That would create variables for each entry from your JSON.

score 0 · Answer 4 · answered Jun 23 '20 at 04:52

The quick answer is no. You use a const specifically when you know in advance what you're looking for. But practically, you can achieve what you're trying to do.

When you have a bunch of items you want to handle programmatically, data structures like arrays and JavaScript objects make more sense, but that's best for a situation where you don't know what you're going to encounter in advance.

If you know in advance you want to use these fields, then you already have what you need:

const {squadName, homeTown, formed, secretBase, active} = data;

If you don't know in advance, then it makes sense to choose the elements programmatically and put them in a new object or array. For example, if you wanted to create a new object with only the string values included, then:

const justStrings = Object.keys(data)
  .filter((k) => typeof data[k] === 'string')
  .reduce((newObj, k) => {
    newObj[k] = data[k];
    return newObj;
  }, {});

And that would return this object:

{
  squadName: 'Super hero squad',
  homeTown: 'Metro City',
  secretBase: 'Super tower'
}

score 0 · Answer 5 · answered Jun 23 '20 at 05:16

You can use global globalThis property to dynamically assign the json data property key values without having to hard code the const {squadName, homeTown, formed, secretBase, active} = data in destructuring;

json = '{"squadName":"Super hero squad","homeTown":"Metro City","formed":2016,"secretBase":"Super tower","active":true,"members":[{"name":"Molecule Man","age":29,"secretIdentity":"Dan Jukes","powers":["Radiation resistance","Turning tiny","Radiation blast"]}]}';

data = JSON.parse(json);

console.log(data);

Object.entries(data).forEach(([key, val]) => globalThis[key] = val);

console.log(squadName, homeTown, formed, secretBase, active);

javascript destructuring without declaring variables

5 Answers5