android webview内嵌网页js解析json 并根据json数据生成表单以及radio的样式问题

        在开发android app时，常常碰到新闻客户端的开发，新闻客户端的新闻详细页面很可能是一个html，android端需要用webview来展示，但是如果需要webview与android端相互调用，都会用到js与android端的相互调用，但是如果要传递一个json数据到webview,调用网页的js来解析json获取数据来调用相关的方法，那就需要js解析json。

      js解析json，我用的是eval函数。

function initToupiaoTest() {
 //date是手机端传递过来的对象，get获取一个json
 var str = eval("("+datas.getTestJson().toString()+")");
  var main = str['main'],questions = str['questions'];

  for(var i=0;i< questions.length;i++)
  {
   console.log('hello : ******测试**** >>>>>>>>> = '+questions[i]._id);
  
   for(var j=0;j<questions[i].answers.length;j++)
   {
    //alert(questions[i].answers[j].title)//拿到answers的元素
    console.log('hello : ******测试**** >>>>>>>>> = '+questions[i].answers[j].title); 
   }
  }

}

 //模拟数据

var str = '{"main":{"_id":"xxx","catid":"1707","description":"","exit_content":"","exit_title":"","exit_url":"","status":10,"sub_title":"","title":"list\u6d4b\u8bd5","checkresult":0},"questions":[{"_id":"xxx","title":"Q2\uff1a","type":"radio","is_required":"1","answers":[{"_id":"xxx","title":"A.","hits":15},{"_id":"xxx","title":"B.","hits":11}]},{"_id":"xxx","title":"Q1\uff1a","type":"radio","is_required":"1","answers":[{"_id":"xxx","hits":12,"title":"titleA."},{"_id":"xxx","hits":17,"title":"titleB."}]}]}';

 

 //生成表单

 

<div id="toupiao">

    <h4>

        <span></span>

        <P style="color:#ffffff;background-image: url(bluel.png);font-family: '微软雅黑';" id="q_title">您觉得这次改版如何</p>

        <span></span>

    </h4>

<form >

<div id="qlist">

<!-- 这里是生成表单内容-->

 

</div>

 

 

 

<div style="width:100%;text-align:center;"><input type="button" name="aa" style="color:#ffffff;background-image: url(bluel.png);width:80%;line-height:38px;height:38px;font-family: '微软雅黑';" value="显示投票结果"  onClick="hi()"/></div>

</form>

</div>

 

 

//js代码

var main = str['main'],questions = str['questions'],htmlArr = new Array();

 

 

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

{

//alert(questions[i]._id)//拿到questions的元素

 

htmlArr.push('<p style="font-weight:bold;" id="'+questions[i]._id+'">'+questions[i].title+'</p>');

 

for(var j=0;j<questions[i].answers.length;j++)

{

//alert(questions[i].answers[j].title)//拿到answers的元素

 

htmlArr.push('<label class="input"><input type="radio" name="aa" id="'+questions[i]._id+'">&nbsp;'+questions[i].answers[j].title+'</label><br>');

}

}

document.getElementById('qlist').innerHTML = htmlArr.join('');

 

如果展示的radio样式有问题，在webview中展示为一条下划线，那么在代码中注释掉如下代码

/*mWebview.getSettings().setLayoutAlgorithm(

WebSettings.LayoutAlgorithm.SINGLE_COLUMN);*/