First javascript project with Durandal. Trying to get data from 3rd party API -

so i'm working on project players of game able compare performance of peers @ same skill level. can prototype of code work outside of durandal structure, when try follow along other examples while supplying own sources data, can't together.

here code:

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 = this;         if (this.name.length > 0) {             return;         }         return http.jsonp(url + name + key, 'jsoncallback').then(function(response){             that.name(response.items);         });     } }; });  

replace #'s personal api key host recommends don't share. i'll supply 1 if necessary , change later.

i have 2 specific questions here:

1. i got function structure tutorial. don't know why need check length if statement. returning exactly?

2. this api call returns json object nested object inside. want, display keys , values nested object li's on view. right can't tell me if grabbing object in first place.

here html:

<section>   <h2>hello! user 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 class , id,         css linked index.html-->        <ul data-bind="foreach: name">             <li data-bind="text:$data"></li>         </ul>     </fieldset>   </form> </section> 

what expect see 1 bullet item either says object or whatever name fed input box. nothing.

the returned object (with username attached) looks this:

{"ryebrush":{"id":25500750,"name":"ryebrush","profileiconid":551,"summonerlevel":30,"revisiondate":1426533699000}} 

i want able access ryebrush.id, ryebrush.profileiconid, , on , forth. help?

edit: also, comes pre-loaded in input box:

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} 

uhhhhhh.....what?

you sort of asked 2 questions, i'm sort of going give 2 , half answers.

before address first question, using knockout observable function incorrectly, , going cause lots of headaches. let's fix that. following 2 lines of code both work similarly. when call observable function, create new instance of observable. if call no arguments, value of observable undefined. since know want string here, may preferable initialize empty string, in second example.

name: ko.observable(), 

or

name: ko.observable(''), 

then, can set or retrieve value of observable calling function:

that.name('value');

and

that.name() == 'value';

i got function structure tutorial. don't know why need check length if statement. returning exactly?

after if statement, have following line of code:

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

if name undefined or empty, attempt make call 1 of 2 urls respectively:

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

or

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

we know both should return error (probably 400), there's no point in making calls. if statement, when applied string, true when string initialized , empty. note, throw error if string undefined, , that's no good.

however, syntax wrong. technically, value of that.name function and, when treated string, evaluate as

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} 

recall above, better thing write in if statement is

if (!that.name()) 

we call function value. both '' , undefined falsey in javascript, , if statement catch both cases , exit, want. note exit if value of name 0, or other falsey javascript value.

this api call returns json object nested object inside. want, display keys , values nested object li's on view. right can't tell me if grabbing object in first place.

there number of things wrong view.

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

this iterate through value of that.name. if that.name 'ryebrush', (i believe), iterate through each letter. that's no good. if goal have list of summoners in that.name, want swap ko.observable ko.observablearray. may want change name that.name that.names avoid confusion.

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

this right if array filled strings. foreach iterate through each item in array, , $data each item. however, if item in fact object, can reference properties on item. example, if each item in array {"id":25500750,"name":"ryebrush","profileiconid":551,"summonerlevel":30,"revisiondate":1426533699000}

then, since name property on object, can reference name in view

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

finally, you're not getting data in right place after http call. if response http call

{"ryebrush":{"id":25500750,"name":"ryebrush","profileiconid":551,"summonerlevel":30,"revisiondate":1426533699000}} 

then want write

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

if response instead array of items

[{"ryebrush":{"id":25500750,"name":"ryebrush","profileiconid":551,"summonerlevel":30,"revisiondate":1426533699000}}] 

then want write

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

conclusion

unfortunately, isn't great question. can't tell what's going on api you're using, can't tell should write. accomplish you're trying do, you'll need spend little bit of time reading on javascript, knockout, and durandal. here resources each:

• javascript
• knockout
• durandal

however, see you're new user. want encourage not discouraged. it'll take bit of time to learn ropes, it's worth it. don't give up. hope helps!