Build JSON Array through Loop

Question

I'm trying to build a JSON array through a loop where the input className and value will be used as JSON obj and key. But I cannot create one and can't find information on how to create one. I have given a sample below and I need help in the commented line and I want the console.log(json_array); to return {"class_1":"val_1", "class_2":"val_2", "class_3":"val_3", "class_4":"val_4", "class_5":"val_5"}. How can I generate JSON array like this? Also is it even possible to make a JSON array through this method?

document.querySelector("button").onclick = function() {
    var json_array = [];
    document.querySelectorAll("div input").forEach(x => {
        json_array.push(x.className.toString() : x.value.toString()); // DOESN'T WORK
    });
    console.log(json_array);
};

<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div>
        <input type="text" class="class_1" value="val_1">
        <input type="text" class="class_2" value="val_2">
        <input type="text" class="class_3" value="val_3">
        <input type="text" class="class_4" value="val_4">
        <input type="text" class="class_5" value="val_5">
    </div>
    <button>BUILD</button>
</body>
</html>

Your desired output of {"class_1", "val_1", "class_2", is invalid syntax. Objects need key-value pairs. An array is not the same thing as an object. If you want an array (values only, no key-value pairs), use an array instead of an object. — CertainPerformance
– CertainPerformance, Commented Feb 27, 2019 at 0:28
Just change the : to a comma to push multiple items to an array in a single .push — CertainPerformance
– CertainPerformance, Commented Feb 27, 2019 at 0:31
I think what people are trying to say is that you're wanting to push an object into the array, you would do so like: json_array.push({ name: x.className.toString(), value: x.value.toString() }); — Steven Stark
– Steven Stark, Commented Feb 27, 2019 at 0:34

Taki · Accepted Answer · 2019-02-27 00:31:53Z

1

Object doesn't have push, that's an Array function, you need to add the keys using the bracket notation : json_array[x.className] = x.value

document.querySelector("button").onclick = function() {
    var json_array = {};
    document.querySelectorAll("div input").forEach(x => {
        json_array[x.className] = x.value
    });
    console.log(json_array);
};

<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div>
        <input type="text" class="class_1" value="val_1">
        <input type="text" class="class_2" value="val_2">
        <input type="text" class="class_3" value="val_3">
        <input type="text" class="class_4" value="val_4">
        <input type="text" class="class_5" value="val_5">
    </div>
    <button>BUILD</button>
</body>
</html>

answered Feb 27, 2019 at 0:31

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ele Over a year ago

There is no such thing called bracket notation.

Taki Over a year ago

@Ele property accessors Property accessors provide access to an object's properties by using the dot notation or the *bracket notation .*

Ele Over a year ago

Ooop sorry, I saw something else... My bad!!

brunnerh · Accepted Answer · 2019-02-27 00:34:53Z

1

If you want just one JSON object you have to set the keys:

var json_array = {};
//...
json_array[x.className] = x.value;

edited Feb 27, 2019 at 0:34

answered Feb 27, 2019 at 0:30

brunnerh

188k30 gold badges362 silver badges434 bronze badges

2 Comments

Ele Over a year ago

JSON object doesn't exist in the js world. Did you mean js object?

brunnerh Over a year ago

@Ele: It is referring to the output, which can either be one object or an array of objects.

Ele · Accepted Answer · 2019-02-27 00:32:46Z

You should use computed-property-names and you should wrap the key-value pair {[x.className.toString()] : x.value.toString()} as follow:

document.querySelector("button").onclick = function() {
    var json_array = [];
    document.querySelectorAll("div input").forEach(x => {
        json_array.push({[x.className.toString()] : x.value.toString()}); // DOESN'T WORK
//                       ^^^^^^^^^^^^^^^^^^^^^^^^
        
    });
    console.log(json_array);
};

<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div>
        <input type="text" class="class_1" value="val_1">
        <input type="text" class="class_2" value="val_2">
        <input type="text" class="class_3" value="val_3">
        <input type="text" class="class_4" value="val_4">
        <input type="text" class="class_5" value="val_5">
    </div>
    <button>BUILD</button>
</body>
</html>

Jack Bashford · Accepted Answer · 2019-02-27 00:39:51Z

You need to push an object with dynamic property names:

json_array.push({[x.className.toString()]: x.value.toString()});

Demonstration:

document.querySelector("button").onclick = function() {
  var json_array = [];
  document.querySelectorAll("div input").forEach(x => {
    json_array.push({
      [x.className.toString()]: x.value.toString()
  });
  console.log(json_array);
};

<html>

<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>

<body>
  <div>
    <input type="text" class="class_1" value="val_1">
    <input type="text" class="class_2" value="val_2">
    <input type="text" class="class_3" value="val_3">
    <input type="text" class="class_4" value="val_4">
    <input type="text" class="class_5" value="val_5">
  </div>
  <button>BUILD</button>
</body>

</html>

If you want an object however, use bracket notation to add properties:

document.querySelector("button").onclick = function() {
  var json_array = {};
  document.querySelectorAll("div input").forEach(x => {
    json_array[x.className.toString()] = x.value.toString();
  });
  console.log(json_array);
};

<html>

<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>

<body>
  <div>
    <input type="text" class="class_1" value="val_1">
    <input type="text" class="class_2" value="val_2">
    <input type="text" class="class_3" value="val_3">
    <input type="text" class="class_4" value="val_4">
    <input type="text" class="class_5" value="val_5">
  </div>
  <button>BUILD</button>
</body>

</html>

cantuket · Accepted Answer · 2019-02-27 00:43:23Z

0

document.querySelector("button").onclick = function() {
    var json_array = [];
    document.querySelectorAll("div input").forEach(x => {
        json_array.push({x.className.toString() : x.value.toString())}); // DOESN'T WORK
    });
    console.log(json_array);
};

I think everyone on here is still trying to guess the specific shape of your desired result because what you laid out doesn't make sense for a few reasons. My best guess of what you're actually looking for is this...

 [
    {"class_1":"val_1"}, 
    {"class_2":"val_2"}, 
    {"class_3":"val_3"}, 
    {"class_4":"val_4"}, 
    {"class_5":"val_5"}
]

which would be an Array of Objects, with input field className as the object's key and input value as that keys value. If you're trying to achieve something else then let me know.

If what you're actually looking for is a single Object with input field className as a key and input value as that keys value, like this...

{
    "class_1": "val_1", 
    "class_2": "val_2", 
    "class_3": "val_3", 
    "class_4": "val_4", 
    "class_5": "val_5"
}

Then this is how you could achieve that...

document.querySelector("button").onclick = function() {
    var js_obj = {};
    document.querySelectorAll("div input").forEach(x => {
        var className = x.className.toString(),
            value = x.value.toString();
        js_obj[className] = value;
    });
    console.log(js_obj);
};

edited Feb 27, 2019 at 0:43

answered Feb 27, 2019 at 0:31

cantuket

1,59010 silver badges20 bronze badges

3 Comments

Jack Bashford Over a year ago

It's better to include an explanation of the code as well, rather than just pure code.

cantuket Over a year ago

@JackBashford Definitely agree. I generally get the code answer out first and then update with the description right after. Is that a faux pas? Don't want to violating best-practices, just find its mess to do everything at one in these editors.

Jack Bashford Over a year ago

I agree, and it also gives you a chance to experiment with the code you posted (e.g. optimise it).

Bibberty · Accepted Answer · 2019-02-27 00:43:53Z

0

Does this provide what you are looking for? Using an Array.map to transform you element collection. Tweaked based on Ele suggestion of computed property

document.querySelector("button").onclick = function() {

  let arr = Array.from(document.querySelectorAll("div input")).map(x => {
    return {[x.className] : x.value};
  });

  console.log(arr);
};

<html>

<head>
  <meta charset="UTF-8">
  <title>TEST</title>
</head>

<body>
  <div>
    <input type="text" class="class_1" value="val_1">
    <input type="text" class="class_2" value="val_2">
    <input type="text" class="class_3" value="val_3">
    <input type="text" class="class_4" value="val_4">
    <input type="text" class="class_5" value="val_5">
  </div>
  <button>BUILD</button>
</body>

</html>

edited Feb 27, 2019 at 0:43

answered Feb 27, 2019 at 0:42

Bibberty

4,7762 gold badges10 silver badges23 bronze badges

1 Comment

aman Over a year ago

this fixed it : json_array[x.className] = x.value

Collectives™ on Stack Overflow

Build JSON Array through Loop

6 Answers 6

3 Comments

2 Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related