使用 Knockout JS 和 API 循环遍历数据

Question

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

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

我的fiddle： 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 循环遍历数据

Looping through data with Knockout JS and API

api

mapping

jquery

getjson

knockout.js