怎样将本地JSON文件中数据对应显示在HTML的元素中

遍历json数组，循环插入option到select中。

<select id="select1"></select>

<script src="

<script type="text/javascript">

var jsonData = { 'blogs': ['dudu', 'Artech', 'Fish Li'] }

$.each(jsonData.blogs, function (index, val) {

$("#select1").append("<option value='" + index + "'>" + val + "</option>")

})

</script>

生成的html

<select id="select1">

<option value="0">dudu</option>

<option value="1">Artech</option>

<option value="2">Fish Li</option>

</select>

将json转成对象，然后循环，代码如下：

var objs = JSON.parse( data )// IE低版本（IE8可以支持），好像会报错

for(var i = 0 i < objs.length i++){

    //TODO 获取你要的属性，以及你需要做的 *** 作

}

你的json数据是一个对象，这个json数据结构为:var obj={'list':[]}，list是一个数组，数组里面又有很多对象，每个对象里的数据才是具体的内容，如：var list=obj['list']只要对list变量就行了。如下面变量：

var obj={'list':[{'baotingmianjsString':null,'id':8}]}//你把json数据赋值给一个变量

var list=obj['list']//获取具体数据的数组

//再遍历数组

for(var i=0i<list.lengthi++){

    var data=list[i]//获取详细数据

    console.log(data.id)//输出id的值，因为data是对象，可以直接点属性获取对应的值

    console.log(data.baotingmianjsString)//输出baotingmianjsString

}

大致就是这样的思路。你可以把输出的值用字符串拼接起来放在html页面的一个div或其他的标签显示，这种就是页面显示json数据。

---