javascript 读取json文件 js 读取json文件数据到网页

静态页面html已完成，其数据交互是本地模拟的 .json 数据文件。 那么 html页遇到此问题，调取本地json文件，如下两种实现方式

//访问本地模拟的 .json 数据文件  使用ajax  或者 $getJSON 都是可以的$(function(){ 
　　var dataroot="testData/test.json"; 
　　$.getJSON(dataroot, function(data){ 
　　　　var dataObj=eval（data);//JSON.stringify(data)
　　　　console.log(JSON.stringify(dataObj.Data) ) 
　　});

})

第一种虽然取到了数据，但是还需要进行一番的逻辑处理，那么想要简单些，就可使用框架。例如 使用angular.js  读取本地 json文件：

js

function dataController($http,$scope) {
    var url="testData/test.json";
    $http.get(url).success( function(Data) { 
       $scope.data = Data;
    });
}

 

json文件

{
    "Status": 1,
    "Results": "",
    "Data": [
        {
            "GroupId": "111",
            "GroupName": "规划设计与综合管理",
            "GroupStatus": 0,
            "GroupLevel": "副高级",
            "GroupDiscription": "规划设计与综合管理",
            "GroupType": 0
        },
        {
            "GroupId": "222",
            "GroupName": "信息工程高级职称评审委员会",
            "GroupStatus": 0,
            "GroupLevel": "副高级",
            "GroupDiscription": "信息工程高级职称评审委员会",
            "GroupType": 1
        }
    ]
}

 

html

<div id="panel"  ng-app=""> 
　　<div ng-controller="dataController" >
　　　　<h1>{{data.Data[0].GroupName}}</h1> 
　　　　<div class="titText1">{{data.Data[0].GroupDiscription}}</div> 　　　　
　　　　<div class="titText2">{{data.Data[0].GroupLevel}}</div>

<h1>{{data.Data[1].GroupName}}</h1> 
　　　　<div class="titText1">{{data.Data[1].GroupDiscription}}</div> 　　　　
　　　　<div class="titText2">{{data.Data[1].GroupLevel}}</div>

</div>
</div>