Databases
StackOverflow2013
Postsdbo
POBinding JSON array with HTML list using Knockout.js
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBinding JSON array with HTML list using Knockout.js
    text
    copied!<p>I am new to knockout.js framework and I am stuck in a fairly simple problem of binding a JSON array with a html UL list. The html markup is given below :</p> <pre><code>&lt;div id="genres"&gt; &lt;ul data-bind="foreach: GenreCollection"&gt; &lt;li&gt; &lt;a href="#"&gt;&lt;span data-bind="text: $data"&gt;&lt;/span&gt;&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>I have used the following markup to capture the JSON data coming in as the data for template binding :</p> <pre><code>&lt;pre data-bind="text: ko.toJSON($data, null, 2)"&gt;&lt;/pre&gt; </code></pre> <p>The JSON output is :</p> <pre><code>{ "GenreCollection": [ "Action &amp; Adventure", "Action Comedies", "Action Sci-Fi &amp; Fantasy", "Action Thrillers", "Anime Action", "Bollywood Action &amp; Adventure", "British Action &amp; Adventure", "Classic Action &amp; Adventure", "Crime Action &amp; Adventure", "Foreign Action &amp; Adventure", "Independent Action &amp; Adventure", "Military Action &amp; Adventure", "Spy Action &amp; Adventure", "TV Action &amp; Adventure" ] } </code></pre> <p>ViewModel :</p> <pre><code> function viewModel(){ var self = this; self.GenreCollection = ko.observableArray([]); self.addData = function (data) { for (var item in data) { self.GenreCollection.push(data[item]); } } } GenreNamespace.bindData = function (data) { var obj = new viewModel(); obj.addData(data); ko.applyBindings(obj); } GenreNamespace.getData = function (searchText) { $.ajax({ url: 'Genre/SearchGenre', type: 'POST', data: JSON.stringify(searchText), dataType: 'json', processData: false, contentType: 'application/json; charset=utf-8', success: function (data) { GenreNamespace.bindData(data); }, error: function (message) { alert(message); } }); } </code></pre> <p>Can one any one help me figuring out as what the problem is in the above html template. I am using VS 2012 and Knockout 2.1 framework. </p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload