从离子诺言中读取JSON文件

时间:2022-03-27 22:57:12

I'm working on an ionic project, and trying to read a JSON file from local, through a promise sent from a sevice, and finally injected into a controller. However, I am getting the error SyntaxError: Unexpected token J, where J is always the first character from my JSON file.

我正在研究一个离子项目,并尝试从本地读取一个JSON文件,通过服务发送的一个承诺,最后注入一个控制器。但是,我收到错误SyntaxError:Unexpected token J,其中J始终是我的JSON文件中的第一个字符。

Anyone have an idea?? Thanks very much!!!

有人有想法??非常感谢!!!

I have a route in an app.js

我在app.js中有一条路线

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
  .state('home', {
     url: '/',
     templateUrl: 'templates/home.html',
     controller: 'MainCtrl as vm',
     resolve: {
        weather: function(MyService) {
           return MyService.getData();
     }
  });

  $urlRouterProvider.otherwise('/');
});

My services.js is here

我的services.js就在这里

.factory('MyService', function($http) {

   var base_url = "http://localhost:8100/";

   function getData() {
       return $http.get(base_url+'data/pt_br/mydata.json?callback=JSON_CALLBACK')
          .then(
             function(res) {
                return res;
             },
             function(err) {
                return err;
             }
          )
   }

   return { getData: getData() }
});

Here is my controller

这是我的控制器

.controller('MainCtrl', function(weather) {

   var vm = this;
   vm.weather = weather;
});

And, finally, my json file:

最后,我的json文件:

JSON_CALLBACK ({
    'Introduction': 'Welcome to my site!',
    'texts' : [
        'text1': 'hello',
        'text2': 'world'
    ]
});

2 个解决方案

#1


0  

I think you need top be using JSONP because when it comes back it actually has the function name as the first part of the response.

我认为你最需要使用JSONP,因为当它返回时它实际上有函数名称作为响应的第一部分。

The change you need in your code is:

您的代码中需要的更改是:

 return $http.jsonp(base_url+'data/pt_br/mydata.json?callback=JSON_CALLBACK')

Read about jsonp so you know what is going on JSONP. Here is a fiddle that shows you how to use jsonp.

阅读有关jsonp的内容,以便了解JSONP的内容。这是一个小提琴,向您展示如何使用jsonp。

If you checkout the networking call you will see Angular swaps out the JSON_CALLBACK with something it sets up so you might have trouble trying to mock it out.

如果您检查网络呼叫,您将看到Angular将其设置的内容交换出JSON_CALLBACK,因此您可能无法尝试模拟它。

angular.callbacks._1({"data": "{\"foo\":\"bar\"}"});

#2


0  

I solve the problem. I found out that my json file was sent like text-plain. I pass my json file within a json validator https://jsonformatter.curiousconcept.com/, then, I realized the ALL STRINGS should be wrapped in double quotes, not only values. Thanks for @Rajesh for the clue.

我解决了这个问题。我发现我的json文件像text-plain一样发送。我在json验证器https://jsonformatter.curiousconcept.com/中传递了我的json文件,然后,我意识到ALL STRINGS应该用双引号括起来,而不仅仅是值。感谢@Rajesh的线索。

#1


0  

I think you need top be using JSONP because when it comes back it actually has the function name as the first part of the response.

我认为你最需要使用JSONP,因为当它返回时它实际上有函数名称作为响应的第一部分。

The change you need in your code is:

您的代码中需要的更改是:

 return $http.jsonp(base_url+'data/pt_br/mydata.json?callback=JSON_CALLBACK')

Read about jsonp so you know what is going on JSONP. Here is a fiddle that shows you how to use jsonp.

阅读有关jsonp的内容,以便了解JSONP的内容。这是一个小提琴,向您展示如何使用jsonp。

If you checkout the networking call you will see Angular swaps out the JSON_CALLBACK with something it sets up so you might have trouble trying to mock it out.

如果您检查网络呼叫,您将看到Angular将其设置的内容交换出JSON_CALLBACK,因此您可能无法尝试模拟它。

angular.callbacks._1({"data": "{\"foo\":\"bar\"}"});

#2


0  

I solve the problem. I found out that my json file was sent like text-plain. I pass my json file within a json validator https://jsonformatter.curiousconcept.com/, then, I realized the ALL STRINGS should be wrapped in double quotes, not only values. Thanks for @Rajesh for the clue.

我解决了这个问题。我发现我的json文件像text-plain一样发送。我在json验证器https://jsonformatter.curiousconcept.com/中传递了我的json文件,然后,我意识到ALL STRINGS应该用双引号括起来,而不仅仅是值。感谢@Rajesh的线索。