How can we send a JSONArray through a dynamically generated button event and then retrieve the elements of the JSONArray?

Question

How can we send a JSONArray through a dynamically generated button event and then retrieve the elements of the JSONArray?

In the following SCRIPT code snippet:

var jsonArr = [

  {
    " name": "John",
    "age": 31,
    "city": "New York"
  },

  {
    "name": "Smith",
    "age": 25,
    "city": "Dubai"
  }
];

function create()

{

  createButton(jsonArr);

}

function createButton(jsonArr)

{

  alert('inside function jsonarray length: ' + jsonArr.length);

  alert(jsonArr);

  var htmlcode = "input type=\"button\" id=\"subbtn\" value=\"Dynamic SUBMIT Button\" onclick=\"submitdata(this.id,'" + jsonArr + "');\"";

  document.getElementById("dynamic").innerHTML = htmlcode;

}

function submitdata(id, json_arr)

{

  alert('Button id is: ' + id);

  alert(json_arr);

  alert('inside submit data jsonarray length: ' + json_arr.length);

  // for (var i = 0; i < json_arr.length; i++)

  //{

  //                  var _el = json_arr[i];

  //                var name = _el.name;

  //              var age=_el.age;

  //            var city=_el.city;

  //  alert('Name: '+name);

  //}


}

Next, include a standard button with a value of "Click to Generate Button" and an onclick event of "create()".

The actual length of the JSON array is 2;

However, when passing this JSON array through the submitdata() event, the calculated length of the JSON array is 31 and the elements in the JSON array are undefined.

Could someone assist me in resolving this issue? I need to be able to access the elements of the JSON array inside submitdata().

javascript arrays

Answer 1

Answer №1

Utilize the JSON.stringify() method by following this example

var jsonData = [

  {
    "name": "Alice",
    "age": "28",
    "city": "London"
  },

  {
    "name": "Bob",
    "age": "35",
    "city": "Paris"
  }
];

function generate()

{

  generateButton(jsonData);

}

function generateButton(jsonData)

{

  alert('inside the function jsonData array length: ' + jsonData.length);

  alert(jsonData);

  var htmlCode = "<input type='button' id='subbtn' value='Dynamic SUBMIT Button' onclick='submitInfo(this.id," + JSON.stringify(jsonData) + ");'\>";

  document.getElementById("dynamic").innerHTML = htmlCode;

}

function submitInfo(id, json_data)

{

  alert('Button id is: ' + id);

  alert(json_data);

  alert('inside submit data jsonData length: ' + json_data.length);

  for (var i = 0; i < json_data.length; i++)

  {

    var _el = json_data[i];

    var name = _el.name;

    var age = _el.age;

    var city = _el.city;

    alert('Name: ' + name);

  }
}
generate();

<div id="dynamic"></div>

Answer 2

Utilize the JSON.stringify() method by following this example

var jsonData = [

  {
    "name": "Alice",
    "age": "28",
    "city": "London"
  },

  {
    "name": "Bob",
    "age": "35",
    "city": "Paris"
  }
];

function generate()

{

  generateButton(jsonData);

}

function generateButton(jsonData)

{

  alert('inside the function jsonData array length: ' + jsonData.length);

  alert(jsonData);

  var htmlCode = "<input type='button' id='subbtn' value='Dynamic SUBMIT Button' onclick='submitInfo(this.id," + JSON.stringify(jsonData) + ");'\>";

  document.getElementById("dynamic").innerHTML = htmlCode;

}

function submitInfo(id, json_data)

{

  alert('Button id is: ' + id);

  alert(json_data);

  alert('inside submit data jsonData length: ' + json_data.length);

  for (var i = 0; i < json_data.length; i++)

  {

    var _el = json_data[i];

    var name = _el.name;

    var age = _el.age;

    var city = _el.city;

    alert('Name: ' + name);

  }
}
generate();

<div id="dynamic"></div>

Answer 3

Answer №2

To pass the jsonArray as a string and concatenate it to the on-click event, you can follow these steps.

"<input type='button' id='subbtn' value='Dynamic SUBMIT Button'   onclick=\'submitdata(this.id,"+arrString+")\'>";

var jsonArr = [

  {
    " name": "John",
    "age": 31,
    "city": "New York"
  },

  {
    "name": "Smith",
    "age": 25,
    "city": "Dubai"
  }
];

function create()
{

  createButton(jsonArr);

}

function createButton(jsonArr)
{

 var arrString = JSON.stringify(jsonArr);


 var htmlcode = "<input type='button' id='subbtn' value='Dynamic SUBMIT Button'   onclick=\'submitdata(this.id,"+arrString+")\'>";

  document.getElementById("dynamic").innerHTML = htmlcode;

}

function submitdata(id, json_arr)
{

  console.log(json_arr);

  console.log('inside submit data jsonarray length: ' + json_arr.length);

 
}

<div id="dynamic">
</div>
<input type="buttom" value="Click to Generate Button" onclick="create()">

Answer 4

To pass the jsonArray as a string and concatenate it to the on-click event, you can follow these steps.

"<input type='button' id='subbtn' value='Dynamic SUBMIT Button'   onclick=\'submitdata(this.id,"+arrString+")\'>";

var jsonArr = [

  {
    " name": "John",
    "age": 31,
    "city": "New York"
  },

  {
    "name": "Smith",
    "age": 25,
    "city": "Dubai"
  }
];

function create()
{

  createButton(jsonArr);

}

function createButton(jsonArr)
{

 var arrString = JSON.stringify(jsonArr);


 var htmlcode = "<input type='button' id='subbtn' value='Dynamic SUBMIT Button'   onclick=\'submitdata(this.id,"+arrString+")\'>";

  document.getElementById("dynamic").innerHTML = htmlcode;

}

function submitdata(id, json_arr)
{

  console.log(json_arr);

  console.log('inside submit data jsonarray length: ' + json_arr.length);

 
}

<div id="dynamic">
</div>
<input type="buttom" value="Click to Generate Button" onclick="create()">

How can we send a JSONArray through a dynamically generated button event and then retrieve the elements of the JSONArray?

Answer №1

Answer №2

Similar questions

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

Deliver data in batches of ten when the endpoint is accessed

Receiving error message "[object Object]" while working with JavaScript

Compiling Vue.js without the need for a build tool

AngularJS: Triggering events in one controller to update data in another controller

Platform error: Responses not specified for DIALOGFLOW_CONSOLE

Converting Node JS request to an API into React Fetch syntax

Converting Vue HTML to PDF without relying on html2canvas functionality

Ending a Firestore `get` query upon unmounting component

JavaScript function using recursion returning an undefined value

Issues with Google Fonts failing to load correctly

In which location can one find the compiled TypeScript files within an Angular 2 project?

Developing dynamic HTML content using Android and JavaScript to insert JavaScript code into the head tag dynamically

How to assign a click event to dynamically generated HTML elements using jQuery

Building paths through a jQuery loop

Updating the User Interface in ReactJS based on changes in the state

Injecting HTML into Vue component

Ways to retrieve the initial value and proceed with a subsequent subscription method

What is the best way to transfer variables between two Vue files?