访问json文件数据答案

【问题标题】：Access json file data访问json文件数据
【发布时间】：2017-02-08 12:34:40
【问题描述】：

我在网站 myjson.com 中创建了一个 json 文件。这是网址：json file

现在当我尝试访问这样的数据时：https://api.myjson.com/bins/udmp1/dishes，它不起作用。但是 localy 效果很好。

现在我正在使用的代码：

.constant("baseURL", "https://api.myjson.com/bins/udmp1")
.service('dishesFactory', ['$resource', 'baseURL', function ($resource, baseURL) {

    return $resource(baseURL + "dishes/:id", null, {
        'update': {
            method: 'PUT'
        }
    });

           }])

我做错了什么？

谢谢！

【问题讨论】：

因为网址是api.myjson.com/bins/udmp1，您根本无法访问这样的密钥。
我怎样才能访问密钥呢？当我在本地进行时，它可以工作。
您是在尝试从其他域加载 JSON，还是从 myjson.com 上的页面加载？如果您需要跨域请求，您可能需要查看 JSONP：learn.jquery.com/ajax/working-with-jsonp
@Connum 服务器给出了一个响应头 Access-Control-Allow-Origin:* 所以不需要搞乱 JSONP :D
@armnotstrong 很高兴知道，我不熟悉 myjson。 :)

标签： javascript angularjs json http

【解决方案1】：

如果你想获取dishes 数据，你应该做下一步：

$.get('https://api.myjson.com/bins/udmp1', function (a){
 
  var dishesList = $('ul#dishes');
  
  $.each(a.dishes, function (c,d){
    dishesList.append("<li>"+d.name+"</li>")
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Dishes</p>

<ul id="dishes">
</ul>

由于此响应的Content-Type 是application/json - 无需执行a = JSON.parse(a) 即可将解析后的数据作为对象获取。

a - 这是一个响应承诺对象，您可以在响应到来后继续。

按照AngularJS，你应该做下一步：

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

app.controller('TestController', function ($scope, $http){
  $http.get('https://api.myjson.com/bins/udmp1').then(function (a){
      $scope.dishes = a.data.dishes;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<body ng-app="testMod">
<div ng-controller="TestController" >
    <ul>
        <li ng-repeat="dish in dishes" ng-bind="dish.name"></li>
    </ul>
</div>

【讨论】：

我正在使用角度。我用我的代码更新了帖子。那我该怎么做呢？
NP。很快就会到
我正在使用 ngresource ... 有什么方法可以代替 $http 吗？谢谢
@Squaregus，是的，有
嗯，这就是我想要做的，但我做不到。你能告诉我怎么做吗？

【解决方案2】：

您应该请求 url 并将其分配为 javascript 中的对象，然后您可以像这样访问该属性：

$.ajax({
   url:  "https://api.myjson.com/bins/udmp1",
   method: "get",
   dataType: "json",
   success: function(data){
       var dishes = data.dishes; // now you get dishes
   }
})

【讨论】：

我正在使用角度。我用我的代码更新了帖子。那我该怎么做呢？
@Squaregus 我对 Angular JS 不太熟悉，但是要使用 RESTfull 接口，您首先应该确保服务器已经实现了 RESTfull 接口

【解决方案3】：

试试这个：

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

myApp.controller('FetchCtrl',function($scope, $http) {
  $scope.method = 'GET';
  $scope.url = 'https://api.myjson.com/bins/udmp1';

    $http({method: $scope.method, url: $scope.url}).
      success(function(res) {
        $scope.dishes = res.dishes;
        console.log($scope.dishes); // dishes data
      }).
      error(function(err) {
        console.log(err);
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="FetchCtrl">
</div>

【讨论】：

欢迎您！！将此答案标记为正确，以便对其他人也有用。