title: Knockout Js Dictionary Display MVC
body: <p>I am stuck on something quite basic I believe, therefore I require some expertise to help me achieve this task.</p>
  
  <p>I have a dictionary which takes an integer and string as values in order to store a list of results (which I will show below). My View Model and Controller have this code, that post the data as a JSON String to the Knockout:</p>
  
  <p>[Code for ViewModel]</p>
  
  <pre><code>public class ResultModel
  {
      public Dictionary&lt;int, string&gt; dictResult { get; set; }
      public string dictResultJson { get; set; }
  
      public ResultModel()
      {
          dictResult = new Dictionary&lt;int, string&gt;();
      }
  }
  </code></pre>
  
  <p>[Code for cshtml file]</p>
  
  <pre><code>&lt;h2&gt;Results&lt;/h2&gt;
  &lt;table&gt;
      &lt;tbody data-bind="template: { name: 'tblResult', foreach: dictResultJson() }"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script id="tblResult" type="text/html"&gt;
      &lt;tr&gt;
          &lt;td data-bind="value: key"&gt;&lt;/td&gt;
          &lt;td data-bind="value: value"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      var ResultModel = function(m) {
          var self = this;
          self.dictResultJson = ko.observableArray(mapDictionaryToArray(m.DictJson));
      };
  
      function mapDictionaryToArray(dictionary) {
          var result = [];
          for (var key in dictionary) {
              if (dictionary.hasOwnProperty(key)) {
                  result.push({ key: key, value: dictionary[key] }); 
              }  
          }
  
          return result;
      }
  
      var data = @(Html.Raw(Json.Encode(Model)));
      var dataFromServer = ko.utils.parseJson(data.dictResultJson);
      console.log(dataFromServer);  
  
      ko.applyBindings(new ResultModel(dataFromServer));
      console.log("apply binding");
  &lt;/script&gt;
  </code></pre>
  
  <p>In my cshtml file I am parsing the returned object from the MVC Controller and converting it into an array. Now the problem is that it is not displaying any data, but the variable dataFromServer contains proper data. It has this data:</p>
  
  <p>Object {1: "Kate", 3: "Alex", 4: "Jane"} </p>
  
  <p>Now, how am I supposed to loop this json Result in order to display it in a table format, such as</p>
  
  <p>Table</p>
  
  <p>1   Kate</p>
  
  <p>3   Alex</p>
  
  <p>4   Jane</p>
  
  <p>Thanks in advance</p>
  
  <p>Jesmond</p>