Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Question

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with:

<form id="info">
    <input id="A" name="A" type="hidden" nodetye="parent" value="A">
    <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
    <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
    <input id="B" name="B" type="hidden" nodetye="parent" value="B">
    <input id="B1" name="B1" type="text" nodetye="child" value="B1">
    <input id="B2" name="B2" type="text" nodetye="child" value="B2">
<form>

I am using jQuery to pass values as follows:

function writeJSONfile() {
    var obj = {};
    $("form#info :input").each(function(){
        obj[this.id] = $(this).val();
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}

The current result is:

{"A":"A","A1":"a1val","A2":"a2val","B":"B","B1":"b1val","B2":"b2val"}

However, my expected result is:

{"A":{"A1":"a1val","A2":"a2val"},"B":{"B1":"b1val","B2":"b2val"}}

You can analyze and edit the JSON data using an online json editor. Thanks in Advance

javascript jquery html json stringify

Answer 1

Answer №1

The issue you are encountering stems from the lack of code that differentiates values like 'A', 'B' and 'A1', 'B1', etc. To resolve this, all you need to do is:

Define a variable that points to the object where the property should be included &
Add a simple conditional check using an if statement to control the execution flow.

Example:

/* ----- JavaScript ----- */
function writeJSONfile() {
  var
    /* Initialize an object. */
    obj = {},
    
    /* Declare a variable that references the current object (initially → obj). */
    ref = obj;
    
  /* Loop through each input element. */
  $("form#info :input").each(function() {
    /* Store the id of the input element. */
    var id = this.id;
    
    /* Verify if the nodetype attribute value is 'parent'. */
    if (this.getAttribute("nodetype") == "parent") {
      /* Create a new object at the property and update ref to point to it. */
      ref = obj[id] = {};
    }
    else {
      /* Assign the input's value to the referenced object. */
      ref[id] = $(this).val();
    }
  });
  
  /* Convert the object to a JSON string and return it. */
  return JSON.stringify(obj);
}

/* Generate and display the output. */
console.log(writeJSONfile());

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" name="A" type="hidden" nodetype="parent" value="A"/>
  <input id="A1" name="A1" type="text" nodetype="child" value="a1val"/>
  <input id="A2" name="A2" type="text" nodetype="child" value="a2val"/>
  <input id="B" name="B" type="hidden" nodetype="parent" value="B"/>
  <input id="B1" name="B1" type="text" nodetype="child" value="b1val"/>
  <input id="B2" name="B2" type="text" nodetype="child" value="b2val"/>
</form>

Answer 2

The issue you are encountering stems from the lack of code that differentiates values like 'A', 'B' and 'A1', 'B1', etc. To resolve this, all you need to do is:

Define a variable that points to the object where the property should be included &
Add a simple conditional check using an if statement to control the execution flow.

Example:

/* ----- JavaScript ----- */
function writeJSONfile() {
  var
    /* Initialize an object. */
    obj = {},
    
    /* Declare a variable that references the current object (initially → obj). */
    ref = obj;
    
  /* Loop through each input element. */
  $("form#info :input").each(function() {
    /* Store the id of the input element. */
    var id = this.id;
    
    /* Verify if the nodetype attribute value is 'parent'. */
    if (this.getAttribute("nodetype") == "parent") {
      /* Create a new object at the property and update ref to point to it. */
      ref = obj[id] = {};
    }
    else {
      /* Assign the input's value to the referenced object. */
      ref[id] = $(this).val();
    }
  });
  
  /* Convert the object to a JSON string and return it. */
  return JSON.stringify(obj);
}

/* Generate and display the output. */
console.log(writeJSONfile());

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" name="A" type="hidden" nodetype="parent" value="A"/>
  <input id="A1" name="A1" type="text" nodetype="child" value="a1val"/>
  <input id="A2" name="A2" type="text" nodetype="child" value="a2val"/>
  <input id="B" name="B" type="hidden" nodetype="parent" value="B"/>
  <input id="B1" name="B1" type="text" nodetype="child" value="b1val"/>
  <input id="B2" name="B2" type="text" nodetype="child" value="b2val"/>
</form>

Answer 3

Answer №2

Implemented some adjustments to the management of classes and ids. This function offers a swift and straightforward solution for your issue.

I trust this meets your requirements. Feel free to reach out if you need further explanation or assistance with an improved approach.

function generateJSONFile() {
  var obj = {};

  $(".main").each(function() {
    var mainId = this.id;
    obj[this.id] = {};
    $("input").each(function() {
      if ($(this).hasClass(mainId)) {
        obj[mainId][this.id] = $(this).val();;
      }
    })
  });
  var json = JSON.stringify(obj);
  alert("check" + json);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A">
  <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B">
  <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1">
  <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2">
  <form>
    <button onclick="generateJSONFile()">Run</button>

Answer 4

Implemented some adjustments to the management of classes and ids. This function offers a swift and straightforward solution for your issue.

I trust this meets your requirements. Feel free to reach out if you need further explanation or assistance with an improved approach.

function generateJSONFile() {
  var obj = {};

  $(".main").each(function() {
    var mainId = this.id;
    obj[this.id] = {};
    $("input").each(function() {
      if ($(this).hasClass(mainId)) {
        obj[mainId][this.id] = $(this).val();;
      }
    })
  });
  var json = JSON.stringify(obj);
  alert("check" + json);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A">
  <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B">
  <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1">
  <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2">
  <form>
    <button onclick="generateJSONFile()">Run</button>

Answer 5

Answer №3

Give this a shot:


   function writeToJSONNode() {
       var object = {};
       var reference = object;
       $("form#info :input").each(function () {
           var id = this.id;
           if ($(this).attr("nodetype")==="parent") {
               object[id] = {};
               reference = object[id];
           } else
               reference[id] = $(this).val();
       });
       console.log(JSON.stringify(object));
    //    alert(JSON.stringify(object));
    //    return JSON.stringify(object);
}}

I'm using the attribute name "nodetype" for verification.

Answer 6

Give this a shot:


   function writeToJSONNode() {
       var object = {};
       var reference = object;
       $("form#info :input").each(function () {
           var id = this.id;
           if ($(this).attr("nodetype")==="parent") {
               object[id] = {};
               reference = object[id];
           } else
               reference[id] = $(this).val();
       });
       console.log(JSON.stringify(object));
    //    alert(JSON.stringify(object));
    //    return JSON.stringify(object);
}}

I'm using the attribute name "nodetype" for verification.

Answer 7

Answer №4

To update the obj object, you need to locate all inputs with the attribute nodetype set to parent. For each of these inputs, use their id as a key in the object and assign an empty object as its value. Then, go through all input elements with nodetype set to child, and add each id-value pair to the object where the id is the key and the input box value is the value.

function writeJSONfile() {
  var obj = {};
  $('form#info :input[nodetype=parent]').each(function(){
    obj[this.id] = {};
  })
  $("form#info :input[nodetype=child]").each(function(){
    if(!(this.id[0] in obj))
      obj[this.id[0]] = {};
    obj[this.id[0]][this.id] = $(this).val();
  });
  var json = JSON.stringify(obj);
  console.log(json);
}
writeJSONfile();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" name="A" type="hidden" nodetype="parent" value="A">
  <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" name="B" type="hidden" nodetype="parent" value="B">
  <input id="B1" name="B1" type="text" nodetype="child" value="B1">
  <input id="B2" name="B2" type="text" nodetype="child" value="B2">
<form>

Answer 8

To update the obj object, you need to locate all inputs with the attribute nodetype set to parent. For each of these inputs, use their id as a key in the object and assign an empty object as its value. Then, go through all input elements with nodetype set to child, and add each id-value pair to the object where the id is the key and the input box value is the value.

function writeJSONfile() {
  var obj = {};
  $('form#info :input[nodetype=parent]').each(function(){
    obj[this.id] = {};
  })
  $("form#info :input[nodetype=child]").each(function(){
    if(!(this.id[0] in obj))
      obj[this.id[0]] = {};
    obj[this.id[0]][this.id] = $(this).val();
  });
  var json = JSON.stringify(obj);
  console.log(json);
}
writeJSONfile();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" name="A" type="hidden" nodetype="parent" value="A">
  <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" name="B" type="hidden" nodetype="parent" value="B">
  <input id="B1" name="B1" type="text" nodetype="child" value="B1">
  <input id="B2" name="B2" type="text" nodetype="child" value="B2">
<form>

Answer 9

Answer №5

function createJSONfile() {
  var data = {};
  $(".main").each(function() {
    var mainId = this.id;
    data[mainId] = {};
    $("."+mainId).each(function() {
      data[mainId][this.id] = $(this).val();      
    })
  });
  console.log(JSON.stringify(data));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A">
  <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B">
  <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1">
  <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2">
  <form>
    <input type="button" onclick="createJSONfile()" value="Generate JSON">

Answer 10

function createJSONfile() {
  var data = {};
  $(".main").each(function() {
    var mainId = this.id;
    data[mainId] = {};
    $("."+mainId).each(function() {
      data[mainId][this.id] = $(this).val();      
    })
  });
  console.log(JSON.stringify(data));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="info">
  <input id="A" class="main" name="A" type="hidden" nodetye="parent" value="A">
  <input id="A1" class="A" name="A1" type="text" nodetype="child" value="a1val">
  <input id="A2" class="A" name="A2" type="text" nodetype="child" value="a2val">
  <input id="B" class="main" name="B" type="hidden" nodetye="parent" value="B">
  <input id="B1" class="B" name="B1" type="text" nodetye="child" value="B1">
  <input id="B2" class="B" name="B2" type="text" nodetye="child" value="B2">
  <form>
    <input type="button" onclick="createJSONfile()" value="Generate JSON">

Answer 11

Answer №6

Follow this format for successful execution:

function createJSONfile() {
debugger;
    var obj = {};
    var children = {};
    $("form#info :input").each(function(){
    var parent = this;
    if(parent.getAttribute("nodetype")=="parent"){
        obj[parent.id] = {};
          var nexts = $(parent).nextAll();
          for(let i=0;i<nexts.length;i++){
          if(nexts[i].getAttribute("nodetype")!="child"){
            break;
            }else{
            obj[parent.id][nexts[i].id] = $(nexts[i]).val();
            }
          }
        }
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}
createJSONfile();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="info">
      <input id="A" name="A" type="hidden" nodetype="parent" value="A">
      <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
      <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
      <input id="B" name="B" type="hidden" nodetype="parent" value="B">
      <input id="B1" name="B1" type="text" nodetype="child" value="B1">
      <input id="B2" name="B2" type="text" nodetype="child" value="B2">
    <form>

Answer 12

Follow this format for successful execution:

function createJSONfile() {
debugger;
    var obj = {};
    var children = {};
    $("form#info :input").each(function(){
    var parent = this;
    if(parent.getAttribute("nodetype")=="parent"){
        obj[parent.id] = {};
          var nexts = $(parent).nextAll();
          for(let i=0;i<nexts.length;i++){
          if(nexts[i].getAttribute("nodetype")!="child"){
            break;
            }else{
            obj[parent.id][nexts[i].id] = $(nexts[i]).val();
            }
          }
        }
    });
    var json = JSON.stringify(obj);
    alert("check"+json);
}
createJSONfile();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form id="info">
      <input id="A" name="A" type="hidden" nodetype="parent" value="A">
      <input id="A1" name="A1" type="text" nodetype="child" value="a1val">
      <input id="A2" name="A2" type="text" nodetype="child" value="a2val">
      <input id="B" name="B" type="hidden" nodetype="parent" value="B">
      <input id="B1" name="B1" type="text" nodetype="child" value="B1">
      <input id="B2" name="B2" type="text" nodetype="child" value="B2">
    <form>

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The npm script for running Protractor is encountering an error

Local variables in AngularJS across multiple Angular applications

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

Showing data in a grid format on a webpage

Include a new class in the classList of an element at a specific index

Using ng-bind-html does not offer protection against cross-site scripting vulnerabilities

What steps can be taken to resolve the issue of Ajax not retrieving any data from

Identifying Changes with jQuery Event Listeners

What is the best way to implement a conditional check before a directive is executed in Angular, aside from using ng-if

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

keep the color of the link after clicking until a different link is clicked

Loading a Component in React (Next.JS) Once the Page is Fully Loaded

What is the method for adjusting the time format?

Implementing the Upload Feature using AngularJS

Incorporating a jQuery word count and limit within PHP code: a step-by-step guide

Avoiding the insertion of styles into the HEAD section when using Webpack MiniCssExtractPlugin in combination with Create React

The issue with MVC4 and Ajax requests for converting image ByteArrays appears to be problematic

Is there a way to align the line under the hyperlinks to match the text size using CSS?

Error 404 occurred when trying to access the webpack file at my website address through next js

Looking for a solution to a problem with your vertical CSS/jQuery dropdown menu