首页 / 技术问答 / Json问答列表 / 问答详情

AngularJS：工厂 $http.get JSON 文件

I am looking to develop locally with just a hardcoded JSON file. My JSON file is as follows (valid when put into JSON validator):

{
    "contentItem": [
            {
            "contentID" : "1", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        },{
            "contentID" : "2", 
            "contentVideo" : "file.mov",
            "contentThumbnail" : "url.jpg",
            "contentRating" : "5",
            "contentTitle" : "Guitar Lessons",
            "username" : "Username", 
            "realname" : "Real name",
            "contentTags" : [
                { "tag" : "Guitar"},
                { "tag" : "Intermediate"},
                { "tag" : "Chords"}
            ],      
            "contentAbout" : "Learn how to play guitar!",
            "contentTime" : [
                { "" : "", "" : "", "" : "", "" : ""},
                { "" : "", "" : "", "" : "", "" : ""}
            ],          
            "series" :[
                { "seriesVideo" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "1", "seriesTitle" : "How to Play Guitar" },
                { "videoFile" : "file.mov", "seriesThumbnail" : "url.jpg", "seriesTime" : "time", "seriesNumber" : "2", "seriesTitle" : "How to Play Guitar" }
            ]
        }
    ]
}

当JSON在工厂内部硬编码时，我已经使我的控制器、工厂和html正常工作.但是，现在我已经用$http.get代码替换了JSON，它就不能工作了.我见过这么多不同的$http和$resource示例，但我不确定要go 哪里.我在寻找最简单的解决方案.我只是想为NG-Repeat和类似的指令提取数据.

Factory:

theApp.factory('mainInfoFactory', function($http) { 
    var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });
    var factory = {}; // define factory object
    factory.getMainInfo = function() { // define method on factory object
        return mainInfo; // returning data that was pulled in $http call
    };
    return factory; // returning factory to make it ready to be pulled by the controller
});

Any and all help is appreciated. Thanks!

推荐答案

好的，下面是一个 list :

1)如果您没有运行任何类型的Web服务器，而只是使用file://index.html，进行测试，那么您可能会遇到同源策略问题.请参见:

https://code.google.com/archive/p/browsersec/wikis/Part2.wiki#Same-origin_policy

许多浏览器不允许本地托管的文件访问其他本地托管的文件.Firefox确实允许这样做，但前提是您加载的文件与html文件(或子文件夹)包含在同一文件夹中.

2) The success function returned from $http.get() already splits up the result object for you: 

$http({method: 'GET', url: '/someUrl'}).success(function(data, status, headers, config) {

So it's redundant to call success with function(response) and return response.data.

3) The success function does not return the result of the function you pass it, so this does not do what you think it does:

var mainInfo = $http.get('content.json').success(function(response) {
        return response.data;
    });

This is closer to what you intended:

var mainInfo = null;
$http.get('content.json').success(function(data) {
    mainInfo = data;
});

4) 但您真正想要做的是返回一个对象的引用，该对象的属性将在数据加载时填充，因此如下所示:

theApp.factory('mainInfo', function($http) { 

    var obj = {content:null};

    $http.get('content.json').success(function(data) {
        // you can do some processing here
        obj.content = data;
    });    

    return obj;    
});

mainInfo.content将从NULL开始，当数据加载时，它将指向它.

或者，您可以返回$http.get返回的实际promise 并使用它:

theApp.factory('mainInfo', function($http) { 
    return $http.get('content.json');
});

然后，您可以在控制器的计算中异步使用该值:

$scope.foo = "Hello World";
mainInfo.success(function(data) { 
    $scope.foo = "Hello "+data.contentItem[0].username;
});

Json相关问答推荐

嵌套自定义解组

JSON字符串处理注入引号

PowerShell：将Invoke-WebRequest与变量一起使用

kotlinx-serialization：如何将具有不同类型对象的JsonArray转换为同一个Class

PowerShell脚本未按预期生成预期的JSON输出

如何使用jq使用子值对象的键对json对象进行分组

如何使用 JOLT 使用输入数组中的值和层次 struct 中的其他字段创建数组

Oracle json 对象的最后一个值不在引号中

使用 jq 将消息转换为数组

Nifi - 忽略(或删除)JSON 的第一个数字

Serde JSON 反序列化枚举

如何使用 ConfigurationBuilder 解析现有的 json 字符串(不是文件)

Angularjs访问本地json文件

在 Apache Spark 中读取多行 JSON

在 Http Header 中使用 Json 字符串

JSON.NET JsonConvert 与 .NET JavaScriptSerializer

关于使用 $ref 的 JSON 模式

json_encode() 返回 false

MVC JsonResult camelCase 序列化

Microsoft.Net.Http 与 Microsoft.AspNet.WebApi.Client

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630