如何使用angularjs从json文件中获取数据

Posted 2023-05-09

【中文标题】如何使用angularjs从json文件中获取数据

【英文标题】：how to get data from json file using angularjs

【发布时间】：2014-09-06 15:39:13

【问题描述】：

我正在从 json 文件中获取数据以显示在表格中，但只有第一次我从 getdata() 获取数据时，下一次出现以下错误： 未捕获的类型错误：无法读取未定义 Controller.js:95 的属性“长度”

$http 返回值很好，我第一次从 json 文件中获取了所有数据，下一次我无法从 getdata() 获取数据。 getData() 函数不能正常工作，它只是第一次工作，下次我无法获取数据。

如何解决这个问题。

controller.js

    var app = angular.module('main', ['ngTable', 'claimApp']); 
    app.controller('DemoCtrl', function ($scope, $filter, ngTableParams, appFactory,$http) 
   $scope.datasets = ["1", "2", "3"];
   $scope.dataset = "1"; 
   var data1 = [];
var data2 = []; 
var data3 = []; 
$scope.totalCnt = function () 
    return window.document.getElementById("tablesort").getElementsByTagName("TR").length - 1;
; 

var getData = function ()   
    if ($scope.dataset == "1")  
         $http.get('json/json0.json').success(function(data) 
           data1 = data; 
          );  
        return data1; 
     else if ($scope.dataset == "2")  
           $http.get('json/json1.json').success(function(data) 
           data2= data;   
          );  
           return data2; 
     else if ($scope.dataset == "3")  
               $http.get('json/json2.json').success(function(data) 
           data3= data;   
          );  
          return data3; 
     
;
$scope.$watch("dataset", function ()  
    $("#tablesort").fadeOut('slow', function ()  
        $scope.tableParams.reload();
        $scope.tableParams.page(1); 
        $("#tablesort").fadeIn('slow');   
    ); 
);
$scope.tableParams = new ngTableParams(
    page: 1, // show first page
    count: 10, // count per page
    sorting: 
        name: 'asc' // initial sorting
    
, 
    total: function ()  
        return getData().length;
        console.info("==="+getData().length);
    , // length of data
    getData: function ($defer, params) 
        var filteredData = getData(); 
        console.info("filteredData"+filteredData);<!--i could not get this data second time only it is working first time-->
        var orderedData = params.sorting() ?
            $filter('orderBy')(filteredData, params.orderBy()) :
            filteredData; 
        var lastPage = (1 + Math.floor((orderedData.length - 1) / params.count())); 
        $("#lastpage").html(lastPage); 
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

    ,
    $scope: 
        $data: 
     
); 
 );

【问题讨论】：

而不是data1 = data; 使用$scope.data1 = data; 并删除return 语句。与data2, data3

相同

【参考方案1】：

根据文档

Request transformations:

If the data property of the request configuration object contains an object, serialize it         into JSON format.
Response transformations:

If XSRF prefix is detected, strip it (see Security Considerations section below).
If JSON response is detected, deserialize it using a JSON parser.

所以在你的回复中使用

$http.get('json/json0.json').success(function(data) 
       data1 = JSON.parse(data); 
      );

编辑

var getData = function ()   
if ($scope.dataset == "1")  

     $http.get('json/json0.json').success(function(data) 
       $scope.response = data; 
      );  
 else if ($scope.dataset == "2")  

       $http.get('json/json1.json').success(function(data) 
       $scope.response = data; 
      );  

 else if ($scope.dataset == "3")  

           $http.get('json/json2.json').success(function(data) 
       $scope.response = data; 
      );  

 
return $scope.response;
;

【讨论】：

我想用什么？

我的 json 数据如下： [ "claim": "One", "ta": 43, "assy": "nae1", "sa": "SA1", "pity": "Prty1", "acn": [ "action1": "Acon1" , "action2": "Actn2" ] ]

console.log(data) 你有什么？

告诉我你在控制台日志中有什么

[对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象，对象]