CODEWITHSUNDEEP
javascripthtmlarraysjsonobject
aman
aman

Reputation: 393

Build JSON Array through Loop

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>

Upvotes: 1

Views: 176

Answers (6)

Bibberty
Bibberty

Reputation: 4768

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>

Upvotes: 0

cantuket
cantuket

Reputation: 1592

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);
};

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44087

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>

Upvotes: 0

brunnerh
brunnerh

Reputation: 184396

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

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

Upvotes: 1

Ele
Ele

Reputation: 33726

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>

Upvotes: 0

Taki
Taki

Reputation: 17654

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>

Upvotes: 1

Related Questions