首页 新闻 会员 周边 捐助

js怎么读取本地的 json数据？

1
[已关闭问题] 关闭于 2013-11-09 14:04

本地有一个静态文件 index.html。一个index.js脚本 index.js中有 $scope.rows的JSON格式数据。

1     $scope.rows = [
2         { appId: 1, appName: "會計系統1" , appType: 1, description: "應用系統說明!" },
3         { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
4         { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
5         { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
6         { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
7         { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
8         { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
9         { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }

 

怎么在html里写 js代码来读取？最好还是给个解决方法吧，不要说思路。

问题补充：

index.js

//宣告App Main
var appMain = angular.module('appMain', []);

appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {

    // appType選單
    $scope.appTypeOption = [
        { name: "Web", value: 1 },
        { name: "WPF", value: 2 },
        { name: "App", value: 3 }
    ];
    
    //輸入時必須做資料驗證
    // appId 在Server端產生新增時不用輸入
    // appName 欄位大小 varchar 100
    // appType 必選
    // description 欄位大小 varchar 200
    //$scope.rows = [
    ////var rows = [
    //    { appId: 1, appName: "會計系統1" , appType: 1, description: "應用系統說明!" },
    //    { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
    //    { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
    //    { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
    //    { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
    //    { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
    //    { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
    //    { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
    //];
    var rows = [
         { appId: 1, appName: "會計系統1", appType: 1, description: "應用系統說明!" },
         { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
         { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
         { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
         { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
         { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
         { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
         { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
    ];

}]);

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
data-ng-app="appMain">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Angularjs Sample1</title>

    <!--JQuery-->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

    <!--angularjs-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>

    <!--bootstrap-->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://localhost:12414/netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" type="text/css" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet" />


    <!--index.js-->
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
        function test() {
            alert(rows[2].appName + "--" + rows[2].appType);
        }
        function test2() {
            for (var i = 0; i < rows.length; i++) {
                alert(rows[i].appName + "--" + rows[i].appType);
            }
        }

        //function handleJson() {
            //var j = {
            //    "name": "Michael", "address":
            //    { "city": "Beijing", "street": " Chaoyang Road ", "postcode": 100025 }
            //};
            //document.write(j.name);
            //document.write(j.address.city);

            //var strJSON = "{name:'rows'}";//得到的JSON
            //var obj = eval("(" + strJSON + ")");//转换后的JSON对象
            
            //alert(obj.name.appName);//json name

            //function getData() {
            //    $.ajax({
            //        url: "xxx.php",
            //        success: function (jsondata) {
            //            output(jsondata);
            //        }
            //    });
            //}

            //$.getJSON("AppInfo.json", function (result) {
            //    $.each(result, function (1, field) {
            //        $("p").append(field + " ");
            //    });
            //});

            //$.getJSON("Index.js", function (row) {
            //    alert("JSON Data: " + rows[3].appName);                
            //});

            //$(function () {
            //    $.each(eval(appMain.rows), function (key, value) {
            //        alert(value.appId);
            //    });
            //})

            //alert(rows[2].appName + "--" + rows[2].appType);

            //for (var i = 0; i < appMain.rows.length; i++) {
            //    alert(appMain.rows[i].appName);
            //}

        //}

    </script>
</head>
<body data-ng-controller="appPortalController">
    <input type="button" value="test" onclick="test()"/>
<input type="button" value="test2" onclick="test2()"/>
    <hr />
    <div style="width: 830px; margin-left: auto; margin-right: auto">
        <!--表格模块-->
        <div style="width: 400px; height: 400px; float: left" class="table-responsive">
            <!--搜索框-->

            <table class="table table-striped table-bordered table-condensed table-hover">
                <thead>
                    <tr>
                        <th>AppId</th>
                        <th>AppName</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="row in rows | filter:query">
                        <td>{{row.appId}}</td>
                        <td>{{row.appName}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--表单模块-->
        <div style="width: 400px; float: right">
            <form class="form-horizontal">
                <fieldset>
                    <div class="control-group">
                        <div class="controls">
                            <button class="btn btn-primary" onclick ="handleJson();">新增</button>
                            <button class="btn btn-warning">修改</button>
                            <button class="btn btn-danger">删除</button>
                            <button class="btn btn-success">保存</button>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="input01">AppId</label>
                        <div class="controls">
                            <input type="text" placeholder="请输入AppId" class="input-xlarge">
                            <!--<p class="help-block">这里是验证提示</p>-->
                        </div>
                        <label class="control-label" for="input01">AppName</label>
                        <div class="controls">
                            <input type="text" placeholder="请输入AppName" class="input-xlarge">
                            <!--<p class="help-block">这里是验证提示</p>-->
                        </div>

                        <label class="control-label">AppType</label>
                        <div class="controls">
                            <select class="input-xlarge">
                                <option data-ng-repeat="type in appTypeOption">{{type.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Description</label>
                        <div class="controls">
                            <div class="textarea">
                                <textarea type="" class=""> </textarea>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</body>
</html>
Cornelius的主页 Cornelius | 初学一级 | 园豆：80
提问于：2013-11-07 11:06
< >
分享
所有回答(6)
0

创建一个脚本元素，加载index.js脚本，这样就会执行$.scope.rows=[]语句，可以获取到该对象。

DongDong_GoAHead | 园豆：114 (初学一级) | 2013-11-07 11:09
0

你直接在你需要的页面引入这个index.js文件，那么你这个$scope.rows不就是一个全局的变量了吗？然后怎么读取，其实也就是你如何解析Json了……

Angkor--:-- | 园豆：1086 (小虾三级) | 2013-11-07 11:10

我之前是很少搞网页的，所以对js语法什么的不熟悉。

我的页面已经加载了<script src="index.js"></script>

。$scope.rows是一个全局的变量了，要怎么用呀？

我在一个 button的 onclick时间调用了自己写的一个js函数

<script type="text/javascript">
function handleJson()

{

alert(rows.appname[1]);

}

这样会报错，提示rows没定义。加上$scope也不行

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 13:51
0

将index.js引入，再引入一个jquery包，使用each方法，加上eval方法循环就可以取得数据了

dfgf | 园豆：206 (菜鸟二级) | 2013-11-07 11:42

我就说不要思路啦，你说的我都搜了好多资料可就是不知道怎么弄

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 13:53

    <script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script src="1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $.each(eval(bb), function(key, value) {
                alert(value.appId);
            });
        })
    </script>

bb是js中定义的变量

支持(0) 反对(0) dfgf | 园豆：206 (菜鸟二级) | 2013-11-07 13:56

@dfgf: 

var appMain = angular.module('appMain', []);

appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {

    // appType選單
    $scope.appTypeOption = [
        { name: "Web", value: 1 },
        { name: "WPF", value: 2 },
        { name: "App", value: 3 }
    ];
    
    //輸入時必須做資料驗證
    // appId 在Server端產生新增時不用輸入
    // appName 欄位大小 varchar 100
    // appType 必選
    // description 欄位大小 varchar 200
    $scope.rows = [
        { appId: 1, appName: "會計系統1" , appType: 1, description: "應用系統說明!" },
        { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
        { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
        { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
        { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
        { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
        { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
        { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
    ];

}]);
View Code

这是我的js脚本，你看是要把bb换成什么

换成rows未定义错误，换成appMian.rows,遍历出来的全是 undefined

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 14:05

$scope.rows换成  var bb就行了，因为$会与jquery中的$产生歧义

支持(0) 反对(0) dfgf | 园豆：206 (菜鸟二级) | 2013-11-07 14:08

不是 undefined，是跑到jquery.js中报错

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 14:08

@Cornelius: 变量名改了还要报错吗，不会吧，应该是你那里写的有问题了

支持(0) 反对(0) dfgf | 园豆：206 (菜鸟二级) | 2013-11-07 14:35
0

楼主请先把index.js的$scope.rows改成var rows,然后直接黏贴我的代码就可以运行了

<script type="text/javascript" src="index.js" ></script>

<script type="text/javascript">


function test(){
 alert(rows[2].appName + "--" + rows[2].appType);

}

function test2(){
  for(var i = 0; i < rows.length; i++){
   alert(rows[i].appName + "--" + rows[i].appType);
  }
}

</script>


</head>

<body>
<input type="button" value="test" onclick="test()"/>
<input type="button" value="test2" onclick="test2()"/>
</body>

小橙子123 | 园豆：86 (初学一级) | 2013-11-07 14:00

$scope.rows改成var rows，报错 rows未定义

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 14:15

@Cornelius: 不可能，我刚刚测试了的，

var rows = [
         { appId: 1, appName: "會計系統1", appType: 1, description: "應用系統說明!" },
         { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
         { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
         { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
         { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
         { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
         { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
         { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
   ];是这样的哦；

改好后，可以直接黏贴我的代码执行就好。

支持(0) 反对(0) 小橙子123 | 园豆：86 (初学一级) | 2013-11-07 14:18

@wcheng123: 

0x800a1391 - JavaScript 執行階段錯誤: 'rows' 未經定義

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 14:23

@Cornelius: 麻烦楼主把修改后的代码贴给我看看，因为我的代码可以运行的.

支持(0) 反对(0) 小橙子123 | 园豆：86 (初学一级) | 2013-11-07 14:25

@wcheng123: 

 <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
        function test() {
            alert(rows[2].appName + "--" + rows[2].appType);
        }
        function test2() {
            for (var i = 0; i < rows.length; i++) {
                alert(rows[i].appName + "--" + rows[i].appType);
            }
        }

        //function handleJson() {
            //var j = {
            //    "name": "Michael", "address":
            //    { "city": "Beijing", "street": " Chaoyang Road ", "postcode": 100025 }
            //};
            //document.write(j.name);
            //document.write(j.address.city);

            //var strJSON = "{name:'rows'}";//得到的JSON
            //var obj = eval("(" + strJSON + ")");//转换后的JSON对象
            
            //alert(obj.name.appName);//json name

            //function getData() {
            //    $.ajax({
            //        url: "xxx.php",
            //        success: function (jsondata) {
            //            output(jsondata);
            //        }
            //    });
            //}

            //$.getJSON("AppInfo.json", function (result) {
            //    $.each(result, function (1, field) {
            //        $("p").append(field + " ");
            //    });
            //});

            //$.getJSON("Index.js", function (row) {
            //    alert("JSON Data: " + rows[3].appName);                
            //});

            //$(function () {
            //    $.each(eval(appMain.rows), function (key, value) {
            //        alert(value.appId);
            //    });
            //})

            //alert(rows[2].appName + "--" + rows[2].appType);

            //for (var i = 0; i < appMain.rows.length; i++) {
            //    alert(appMain.rows[i].appName);
            //}

        //}

    </script>
//宣告App Main
var appMain = angular.module('appMain', []);

appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {

    // appType選單
    $scope.appTypeOption = [
        { name: "Web", value: 1 },
        { name: "WPF", value: 2 },
        { name: "App", value: 3 }
    ];
    
    //輸入時必須做資料驗證
    // appId 在Server端產生新增時不用輸入
    // appName 欄位大小 varchar 100
    // appType 必選
    // description 欄位大小 varchar 200
    //$scope.rows = [
    ////var rows = [
    //    { appId: 1, appName: "會計系統1" , appType: 1, description: "應用系統說明!" },
    //    { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
    //    { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
    //    { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
    //    { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
    //    { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
    //    { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
    //    { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
    //];
    var rows = [
         { appId: 1, appName: "會計系統1", appType: 1, description: "應用系統說明!" },
         { appId: 2, appName: "會計系統2", appType: 2, description: "應用系統說明!" },
         { appId: 3, appName: "會計系統3", appType: 3, description: "應用系統說明!" },
         { appId: 4, appName: "會計系統4", appType: 3, description: "應用系統說明!" },
         { appId: 5, appName: "會計系統5", appType: 2, description: "應用系統說明!" },
         { appId: 6, appName: "會計系統6", appType: 1, description: "應用系統說明!" },
         { appId: 7, appName: "會計系統7", appType: 2, description: "應用系統說明!" },
         { appId: 8, appName: "會計系統8", appType: 1, description: "應用系統說明!" }
    ];

}]);
支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 14:27

@Cornelius: var rows = [.....] 不能放在这个appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {
里面，要放在这个标签外面。

支持(0) 反对(0) 小橙子123 | 园豆：86 (初学一级) | 2013-11-07 14:31

@wcheng123: 

在里面的话的话那要怎么引用呀

支持(0) 反对(0) Cornelius | 园豆：80 (初学一级) | 2013-11-07 14:40

@Cornelius: 不好意思，appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {你这个JS插件我也没用过，所以看不懂。

支持(0) 反对(0) 小橙子123 | 园豆：86 (初学一级) | 2013-11-07 14:41
0

//宣告App Main
var appMain = angular.module('appMain', []);

appMain.controller('appPortalController', ["$scope", "$http", "$window", function ($scope, $http, $window) {

    // appType選單
    $scope.appTypeOption = [
        { name: "Web", value: 1 },
        { name: "WPF", value: 2 },
        { name: "App", value: 3 }
    ];

这个鸟毛东西有啥用，如果没用的话，你把那个变量直接复制到页面上用就行了，管他奶奶的

*^__^* | 园豆：428 (菜鸟二级) | 2013-11-07 19:45
0

楼主用的angylarJS嘛，把

//$scope.rows = [ 激活，

var rows = [ 注释掉就可以啦，

不知道楼主还在不。。。

 

德芙牛奶巧克力 | 园豆：210 (菜鸟二级) | 2016-08-22 15:41
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。