Question

我很难获得使用knockout和flickr api显示数据的示例代码片段。我的目标是了解我哪里出错了。如果有人会介意我指向正确的方向，我将非常感激。

我的小提琴中注释掉的代码成功地从flickr中获取JSON数据，用于我的硬编码搜索。我的问题是如何利用knockout JS循环数据并显示链接。

我的小提琴： https://jsfiddle.net/jaloomis111/y9qkefLt/

<table>
   <tbody data-bind="foreach: birdList">
       <tr>
            <td><span data-bind="text: link"></span></td>
        </tr>
   </tbody>
</table>

<script>
//test to recieve JSON Data...works
//$.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags="birds"&format=json&jsoncallback=?', function(data) { 
//console.log(data)
//})

function bird(data) {
    this.link = ko.observable(data.link);
}

function AppViewModel() {
    var self = this;
    self.birdList = ko.observableArray([]);

    $.getJSON('https://api.flickr.com/services/feeds/photos_public.gne?tags="birds"&format=json&jsoncallback=?', function(data) { 

   var mappedBirds = $.map(data.link, function(item) { return new bird(item) 
   });
   self.birdList(mappedBirds);
   console.log(self.mappedBirds());
 })

 }
 // Activates knockout.js
 ko.applyBindings(new AppViewModel());

 </script>

Answer 1

我认为你拥有它，但是你在$.map中引用了错误的东西。将data.link更改为data.items jsfiddle.net/y9qkefLt/1

使用Knockout JS和API循环访问数据

1 个答案: