使用 Knockout JS 和 API 循环数据

Question

我很难获得使用敲除和 flickr api 显示数据的示例 sn-p 代码。我的目标是了解我哪里出错了。如果有人介意为我指明正确的方向，我将不胜感激。

我的小提琴中注释掉的代码确实成功地从 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