如何在单选按钮上单击以获取JSON存储的数据

Question

I'm beginner in javascript and php. I'm passing json data on radio button click to js and then particular radio selection I want to get it and display on html table

$return_arr=array();
$row_array['firstName']= $row['firstName'];
$row_array['lastName']= $row['lastName'];
$row_array['mobiePhoneNumber']= $row['mobiePhoneNumber'];
$row_array['officePhoneNumber']= $row['officePhoneNumber'];

// here push data into json array
array_push($return_arr,$row_array);

$(".radioBtn").click(function(event){
     e.preventDefault();
     // using data attribute getting data of radio button click (json data)
     sendAjaxRequest(($(this).data("jsondata")));
});

function sendAjaxRequest(element,urlToSend)
{
  // here element has got whole json data but not able to get one by one data
  // I have used JSON.parse(element); but page is not working
  var jsondata = element; 

  alert(jsondata.firstName);   

  //var jsonDataa = $.parse(jsondata);
  alert(jsondata["firstName"]);
}

From HTML passing radio selected whole json data

<input type="radio" id="radioBtn" class="radioBtn" name="radioBtn"
       data-jsondata=<?php echo json_encode($return_arr)?>>

Update:: these code is working but because of some reason it was not working ie. radio button is inside foreach loop (not getting whole data from d) and the data-jsondata data attribute is not containing proper format that's why it was not working otherwise its working thanks everyone!! happy coding

Answer 1

This may help you.

// Suppose Your JSON data is {"name":"abcd","age":"22"}  from PHP
<input type="radio" onclick="call(this)" data-jsondata='{"name":"abcd","age":"22"}' /> abc


function call(obj){
   var data = obj.getAttribute("data-jsondata");
   data = JSON.parse(data);
   alert(data.name);
}

Working Example

Answer 2

The data-jsondata should be wrapped in quotes

data-jsondata="<?php echo json_encode($return_arr)?>"

then, in sendAjaxRequest, be sure to use JSON.parse, as "element" at this place is a string

EDIT: according to https://api.jquery.com/data/#data-html5 the JQuery's data() does the JSON parsing for you already, so you don't have to use JSON.parse() anyway