Question

I have an JSON string that gets returned from the server that i’m trying to bind to a foreach loop using KnockoutJS

the JSON returned looks like the following:

    [{"FileID":19,
"ParentID":6,
"SubType":"Page",
"FileName":"nav_secondary_bg.png",
"FileExtension":null,"Filetype":"20",
"FileMethod":null,"FileGroupName":null,
"FileLocation":"/uploads/Page/resized/nav_secondary_bg.png_thumb",
"FilenameOriginal":"nav_secondary_bg.png",
"AltTag":null,
"DateUploaded":"\/Date(-62135596800000+0000)\/",
"OrigFilesize":0,
"OrigFile":null,
"SiteID":0,
"Display":"y",
"FileDefault":false},
{... Next Item...}]

and my html code:

<div id="itemImages" >
     <ul data-bind="foreach: Image">       
        <li>        
        <span data-bind="value: FileName"></span>
        </li>        
        </ul>
    </div>     
</div>

i have tried following the example on the tutorials (http://learn.knockoutjs.com/#/?tutorial=loadingsaving) however it cant get the mapping plugin to correctly map the data and get the forloop working at all.

Update:

using johns example, im now binding the data to the UI however struggling to update the bindings after new data has be recieved.

Answer 1

Here is a working fiddle you can compare with yours:

http://jsfiddle.net/jearles/y4b9e/

Make sure you use the text binding for your span, not the value binding. The value binding is used to bind properties to form elements (input, select, …), whereas the text binding will set the innerText or textContext of the associated DOM element (p, span, …)