js输出json数据

json数据:vardata=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6","}];怎么在html中输出<tr>... json数据:var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6","}];
怎么在html中输出
<tr><td id="a"></td><td id="b"></td><td id="c"></td></tr>
<tr><td id="a"></td><td id="b"></td><td id="c"></td></tr>
上面输出123 下面输出456
展开
 我来答
青鸟中关村专家
推荐于2016-09-05 · 知道合伙人软件行家
青鸟中关村专家
知道合伙人软件行家
采纳数:1734 获赞数:8440
就职于北大青鸟中关村,自2004年踏入北大青鸟这个行业,已经有11年工作经验和8年的培训经验,寓教于乐

向TA提问 私信TA
展开全部

在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:

1.一种为使用eval()函数。

2. 使用Function对象来进行返回解析。

用eval函数来解析,并且使用jquery的each方法来遍历

用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器 返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。 
这里首先给出JSON字符串集,字符串集如下:

代码如下:
var data=" 

root: 

{name:'1',value:'0'}, 
{name:'6101',value:'北京市'}, 
{name:'6102',value:'天津市'}, 
{name:'6103',value:'上海市'}, 
{name:'6104',value:'重庆市'}, 
{name:'6105',value:'渭南市'}, 
{name:'6106',value:'延安市'}, 
{name:'6107',value:'汉中市'}, 
{name:'6108',value:'榆林市'}, 
{name:'6109',value:'安康市'}, 
{name:'6110',value:'商洛市'} 
]
}"; 

var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length+"个对象");
for(var i=0;i<dataObj.root.length;i++){
    var obj=dataObj.root[i];
    alert(obj.Name+"--"+obj.value);
}

由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语 句(statement)来执行。


第二种解析方式就是使用Function对象来完成,它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析

var json='{"name":"CJ","age":18}';

data =(new Function("","return "+json))();

此时的data就是一个会解析成一个 json对象了.

qq1111qq111111
推荐于2018-02-27 · TA获得超过1175个赞
知道小有建树答主
回答量:1166
采纳率:66%
帮助的人:605万
展开全部
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
 <table>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr id="tr_0">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
</tr>
<tr id="tr_1">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
</tr>
<tr id="tr_2">
<td class="a">f</td>
<td class="b">f</td>
<td class="c">f</td>
</tr>
</tbody>
 </table>
 </body>
 <script  type="text/javascript" language="JavaScript">
var data = [{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}],
    i = 0,
    len = data.length;
    
for(; i < len; i++) {
var d = data[i],
id = 'tr_' + i,
$tr = document.getElementById(id);

for(var k in d) {
$tr.getElementsByClassName(k)[0].innerHTML = d[k]; 
}
}
 </script>
</html>

如需要兼容IE8-版本,附加下面这段代码就行

	 if(!document.getElementsByClassName) {
 document.getElementsByClassName=function(cls){
               var els=this.getElementsByTagName('*');
               var ell=els.length;
               var elements=[];
               for(var n=0;n<ell;n++){
                  var oCls=els[n].className||'';
                  if(oCls.indexOf(cls)<0) {
   continue;
  }                                          oCls=oCls.split(/\s+/);
                  var oCll=oCls.length;
                  for(var j=0;j<oCll;j++){
                    if(cls==oCls[j]){
                      elements.push(els[n]);
                      break;
                     }
                   }
                 }
 return elements;
       }//兼容ie8-不支持getElementsByClassName方法
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
dksnear
2015-06-04 · TA获得超过1211个赞
知道小有建树答主
回答量:399
采纳率:0%
帮助的人:617万
展开全部
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>

window.onload = function(){

var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}];
var createEl = function(tag,id,text,parent){

var el = document.createElement(tag);
id && el.setAttribute('id',id);
text && el.appendChild(document.createTextNode(text));
parent && parent.appendChild(el);
return el;
};
var tb = createEl('tbody',null,null,createEl('table',null,null,document.body));

for(var i=0,len=data.length;i<len;i++){

(function(item){

var tr = createEl('tr',null,null,tb);

for(var name in item){

createEl('td',name,item[name],tr);
};

})(data[i]);
};

};

</script>
</head>
<body>
</body>
</html>
追问
谢谢你的回答  html的内容不用改  怎么直接把td里面的值输出出来
追答
      window.onload = function(){
         
            var data=[{"a":"1","b":"2","c":"3"},{"a":"4","b":"5","c":"6"}];

            for(var i=0,len=data.length;i<len;i++){
             
                (function(item){
                 
                    var row = '';
                 
                    for(var name in item){
                     
                       row+=item[name];
                    };

document.body.appendChild(document.createTextNode(row));
document.body.appendChild(document.createElement('br'));
                 
                })(data[i]);
            };
         
        };
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
junny_king
2018-12-12 · 超过24用户采纳过TA的回答
知道答主
回答量:109
采纳率:0%
帮助的人:39.8万
展开全部
    var data = [{ "a": "1", "b": "2", "c": "3" }, { "a": "4", "b": "5", "c": "6" }];
    if (data.length > 0) {
        var html = "";
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            html += "<tr><td>" + item.a + "</td><td>" + item.b + "</td><td>" + item.c + "</td></tr>";
        }
        $("table").html(html);
    }
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式