如何通过动态创建的按钮事件传递jsonarray并访问这些jsonarray元素？

Question

在SCRIPT中

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

  //}


}

然后创建一个普通按钮和值=“点击生成按钮”onclick =“create（）”

实际json数组长度为2;

但是当我通过submitdata（）事件传递这个jsonarray然后我计算jsonarray长度是31并且也找不到jsonarray元素。（show undefined）。

请解决我的问题。我想要访问submitdata（）中的jsonarray元素。

Answer 1

使用JSON.stringify（）方法，试试这个

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," + JSON.stringify(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);

  }
}
create();

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

Answer 2

你必须将jsonAray作为字符串传递并将其连接到像这样的on click事件

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

＆＃13;

＆＃13;

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

 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;