Question

我正在编写用于显示国家/地区详细信息的代码，但我没有从json获取完整的详细信息，为什么会发生这种情况，语法有什么问题？我从输出中只得到了国名和人口。

<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
    <title>search using filters</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/
   ajax/libs/angularjs/1.2.12/angular-route.js">     </script>
    <link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />

        <script type="text/javascript">

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

myApp.config(function($routeProvider)
{
$routeProvider.
when('/',{
templateUrl:'partial2.html',
controller:'MyCtrl'
}).
when('/:countryName',{
templateUrl:'partial1.html',
controller:'oCtrl'
}).
otherwise({
redirectTo:'/'
});
});

myApp.controller('MyCtrl',function($scope,$http) {
    $http.get('/Zjs/data/countries.json').success(function(data){
        $scope.countries=data;
        });
    });

myApp.controller('oCtrl',function($scope,$routeParams,$http)
{
$scope.name=$routeParams.countryName;

$http.get('/Zjs/data/countries.json').success(function(data){

    $scope.country=data.filter(function(entry){
        return entry.name===$scope.name;

        })[0];

    });
});

</script>
    </head>

 <body>

<div class="container" ng-view></div>


 </body>
</html>

//partial1
<h1>{{country.name}}</h1>
<ul>
<li>Image:<img ng-src="{{country.Image}}" width="300" height="300"></img></li>
<li>Population:{{country.population | number }}</li>
<li>Capital: {{country.cap}}</li>
</ul>

//partial2
<ul>
<li ng-repeat="con in countries"><a href="#/{{con.name}}" >{{con.name}}</a></li>
<ul>

//countries.json

 [
        {"name":"india", "population":12345682700,
        "cap":"New Delhi",
        "Image":"http://www.dollsofindia.com/
          images/products/nature-posters/village-scene-DH52_l.jpg"},


        {"cap":"Tokyo","name":"japan", "population":1382700,
       "Image":"file:///C:/Users/USER/Pictures/er/gettt/3.jpg"
        },

        {"name":"South korea", "population":13700,
        "cap":"Seoul","Image":"C:\Users\USER\Pictures\er\gettt\6.jpg"},

        {"name":"iran", "population":132700,
        "cap":"Tehran","Image":"C:\Users\USER\Pictures\er\gettt\9.jpg"},

        {"name":"russia", "population":1485682700,
        "cap":"Moscow","Image":"C:\Users\USER\Pictures\er\gettt\11.jpg"}
]

Answer 1

你的json文件中有未转义的反斜杠，我首先要删除它们，然后看看它在哪里，当我尝试你的代码时，至少解决了对我有用的问题。

[
{
    "name": "india",
    "population": 12345682700,
    "cap": "New Delhi",
    "Image": "http://www.dollsofindia.com/images/products/nature-posters/village-scene-DH52_l.jpg"
},


{
    "cap": "Tokyo",
    "name": "japan",
    "population": 1382700,
    "Image": "file:///C:/Users/USER/Pictures/er/gettt/3.jpg"
},

{
    "name": "South korea",
    "population": 13700,
    "cap": "Seoul",
    "Image": "file:///C:/Users/USER/Pictures/er/gettt/6.jpg"
},

{
    "name": "iran",
    "population": 132700,
    "cap": "Tehran",
    "Image": "file:///C:/Users/USER/Pictures/er/gettt/9.jpg"
},

{
    "name": "russia",
    "population": 1485682700,
    "cap": "Moscow",
    "Image": "file:///C:/Users/USER/Pictures/er/gettt/11.jpg"
}
]

Answer 2

    your json was not a valid one.. so please use this

    [
        {
            "name": "india",
            "population": 12345682700,
            "cap": "New Delhi",
            "Image": "http://www.dollsofindia.com/images/products/nature-posters/village-scene-DH52_l.jpg"
        },
        {
            "cap": "Tokyo",
            "name": "japan",
            "population": 1382700,
            "Image": "file: ///C: /Users/USER/Pictures/er/gettt/3.jpg"
        },
        {
            "name": "Southkorea",
            "population": 13700,
            "cap": "Seoul",
            "Image": "file: ///C: /Users/USER/Pictures/er/gettt/6.jpg"
        },
        {
            "name": "iran",
            "population": 132700,
            "cap": "Tehran",
            "Image": "file: ///C: /Users/USER/Pictures/er/gettt/9.jpg"
        },
        {
            "name": "russia",
            "population": 1485682700,
            "cap": "Moscow",
            "Image": "file: ///C: /Users/USER/Pictures/er/gettt/11.jpg"
        }
    ]

you can test your json data is valid or not by using http://jsonlint.com

我没有完全从JSON获取数据到angularjs

2 个答案: