第一个使用Durandal的javascript项目。试图从第三方API获取数据

所以我正在做一个项目，在这个项目中，一个游戏的玩家能够将他们的表现与他们的同龄人在相同技能水平下的表现进行比较。我可以得到一个在durandal结构之外工作的代码原型，但是当我试图在提供自己的数据源的同时遵循其他示例时，我无法将其全部收集起来

这是我的密码：

define(function (require) {
var http = require('plugins/http'),
    ko = require('knockout');
var url = 'https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/',
    key = '?api_key=#################################';

return {
    name: ko.observable,
    getSummoner: function() {
        var that = this;
        if (this.name.length > 0) {
            return;
        }
        return http.jsonp(url + name + key, 'jsoncallback').then(function(response){
            that.name(response.items);
        });
    }
};
}); 

将#替换为主机建议我不要共享的我的个人API密钥。如果有必要，我会提供一个，以后再换

我这里有两个具体问题：

我从教程中得到了函数结构。我不知道为什么我需要用IF语句检查长度。那到底是什么

此api调用返回一个JSON对象，其中包含一个嵌套对象。我想要的是，将嵌套对象中的键和值显示为视图中的li。现在我甚至不能让它告诉我它是否真的抓住了物体

这是我的HTML：

<section>
  <h2>Hello! What user would you like to investigate?</h2>
  <form class="form-inline">
    <fieldset>
       <label>Name</label>
       <input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'"/> <!--Text input box-->
       <button type="submit" class="btn" data-bind="click: getSummoner, enable: name">Click Me</button><!--This button has both a class and an ID, 
       Css is linked from index.html-->
       <ul data-bind="foreach: name">
            <li data-bind="text:$data"></li>
        </ul>
    </fieldset>
  </form>
</section>

我希望能够访问ryebrush.id、ryebrush.profileIconId等等。帮忙

编辑：此外，这将预加载到输入框中：

function (b){function c(){if(0<arguments.length)return c.Ka(d,arguments[0])&&(c.P(),d=arguments[0],c.O()),this;a.k.zb(c);return d}var d=b;a.N.call(c);a.a.sa(c,a.m.fn);c.o=function(){return d};c.O=function(){c.notifySubscribers(d)};c.P=function(){c.notifySubscribers(d,"beforeChange")};a.s(c,"peek",c.o);a.s(c,"valueHasMutated",c.O);a.s(c,"valueWillMutate",c.P);return c}

---

function（b）{function c（）{if（0你问了两个问题，所以我会给你两个半的答案

在我们回答第一个问题之前，您错误地使用了knockout observable函数，这会给您带来很多麻烦。让我们来解决这个问题。下面两行代码的工作方式类似。当您调用observable函数时，您创建了observable的一个新实例。如果您不带参数调用它，va可观测值的值是
未定义的
。因为我们知道这里需要一个字符串，所以最好将其初始化为空字符串，如第二个示例所示

name: ko.observable(),

或

然后，我们可以通过将其作为函数调用来设置或检索可观测值：

that.name（'value'）；

及

that.name（）=“value”；

我从一个教程中得到了函数结构。我不知道为什么我需要它
用IF语句检查长度。返回的是什么
是吗

在if语句之后，有以下代码行：

http.jsonp(url + name + key, 'jsoncallback')

如果名称未定义或为空，您将尝试分别调用两个URL中的一个：

https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name/undefined/?api_key=#

或

https://na.api.pvp.net/api/lol/na/v1.4/summoner/by-name//?api_key=#

我们知道两者都应该返回一个错误（可能是400），因此进行这些调用没有意义。当应用于字符串时，if语句在字符串初始化且为空时为true。注意，如果字符串
未定义
，这将抛出一个错误，这是不好的

但是，语法也是错误的。从技术上讲，
that.name
的值是一个函数，当作为字符串处理时，将作为

function (b){function c(){if(0<arguments.length)return c.Ka(d,arguments[0])&&(c.P(),d=arguments[0],c.O()),this;a.k.zb(c);return d}var d=b;a.N.call(c);a.a.sa(c,a.m.fn);c.o=function(){return d};c.O=function(){c.notifySubscribers(d)};c.P=function(){c.notifySubscribers(d,"beforeChange")};a.s(c,"peek",c.o);a.s(c,"valueHasMutated",c.O);a.s(c,"valueWillMutate",c.P);return c}

我们调用函数来获取值。
'
和
未定义的
在javascript中都是错误的，因此if语句将捕获这两种情况并退出，这就是我们想要的。请注意，如果name的值为0或任何其他错误的javascript值，它也将退出

这个api调用返回一个JSON对象，其中包含一个嵌套对象。什么
我想要的是将嵌套对象中的键和值显示为
李在视图上。现在我甚至不能让它告诉我
实际上，一开始就抓住了物体

你的观点有很多地方是错误的

<ul data-bind="foreach: name">

如果数组中填充了字符串，则这是正确的。
foreach
将遍历数组中的每个项，
$data
是每个项。但是，如果该项实际上是一个对象，则可以引用该项的属性。例如，如果数组中的每个项都是
{“id”：25500750，“名称”：“RyeBrush”，“profileIconId”：551，“召唤级别”：30，“修订日期”：1426533699000}

然后，由于名称是对象上的属性，因此可以在视图中引用
name

<li data-bind="text:name"></li>

那你就要写了

return http.jsonp(url + name + key, 'jsoncallback')
    .then(function(response){
        that.name(response["ryebrush"]);
    });

return http.jsonp(url + name + key, 'jsoncallback')
    .then(function(response){
        that.name(response[0]["ryebrush"]);
    });

如果响应是一个项目数组

[{"ryebrush":{"id":25500750,"name":"RyeBrush","profileIconId":551,"summonerLevel":30,"revisionDate":1426533699000}}]

那你就要写了

return http.jsonp(url + name + key, 'jsoncallback')
    .then(function(response){
        that.name(response["ryebrush"]);
    });

return http.jsonp(url + name + key, 'jsoncallback')
    .then(function(response){
        that.name(response[0]["ryebrush"]);
    });

结论
不幸的是，这不是一个很好的问题。我不能确切地告诉您正在使用的API发生了什么，所以我不能确切地告诉您应该编写什么。要完成您试图做的事情，您需要花一点时间阅读javascript、knockout和durandal。以下是一些很好的资源：






不过，我看到你是一个新用户。我想鼓励你不要气馁。学习诀窍需要一点时间，但这是值得的。不要放弃。我希望这会有所帮助！
对不起，杜兰达尔与传奇联盟不兼容。；）开个玩笑，如果你觉得这有帮助，请确保你投票并接受。我不鼓励你继续问这个问题，因为这个问题有点太宽泛了，如果你花点时间搜索堆栈溢出，你可能会找到你想要的答案。我完全会回来，一旦我找到了有代表参与。这是一个非常重要的答案，谢谢你花时间，今晚我将深入研究并解决这个问题。我会让你知道这是否有效。我会投你一票。这是一个友好而深思熟虑的答案。这为我指明了正确的方向。我现在正在拼凑它，而不是盲目地复制教程和其他内容中的粘贴不用了，谢谢你对我耐心。
return http.jsonp(url + name + key, 'jsoncallback')
    .then(function(response){
        that.name(response["ryebrush"]);
    });

[{"ryebrush":{"id":25500750,"name":"RyeBrush","profileIconId":551,"summonerLevel":30,"revisionDate":1426533699000}}]

return http.jsonp(url + name + key, 'jsoncallback')
    .then(function(response){
        that.name(response[0]["ryebrush"]);
    });