bind and Display dictionary with knockoutjs

Question

i work with knockout, i have an observablearray (mappedCompaignByInterest) in my viewmodel that contains array of object, each object is like dictionary, it contain key that is string and the value that is an array of object(Compaign). please how can i bind this object with table on knockoutjs .

here is my viewmodel :

    function DashboardViewModel() {
    var self = this;        
    self.BuzzCompaignByInterest = ko.observableArray([]);

}

and this is for loading data from server

  //    Load initial state from server,
    $.getJSON("/Dashboard", function (Data) {            
        var mappedCompaignByInterest = Data.BuzzCompaignByInterest;            
        self.BuzzCompaignByInterest(mappedCompaignByInterest);                        
       });

note that Data.BuzzCompaignByInterest wish i get it from server is a dictionary , the key is a string and the value is an array of object(Compaign) here is the propertie of class Compaign :

 public class BuzzCompaignModel
{
    public long BuzzCompaignId { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
 }

please how can i display data from BuzzComapignByInterest(observablearray in viewmodel)

Please post some code. Examples include 1) structure of your viewmodel, 2) desired output (what the table should loook like), and 3) what you have tried. — Kyeotic, Jul 19 '12 at 17:19
Cool, much better. So javascript's "associative arrays" are really just objects with properties, javascript doesn't have dictionaries. This is going to be tricky, since your values are objects. Dictionaries cannot be directly serialized to JSON, which is a necessary step. This question has a method for doing it, but it will need to be modified to work with your code: http://stackoverflow.com/questions/5597349/c-sharp-dictionary-to-json — Kyeotic, Jul 19 '12 at 18:30
Is there a reason your result is a Dictionary and not just a list? — Kyeotic, Jul 19 '12 at 18:33
thats mean i must modified the object in the server before sent it? — ucef, Jul 19 '12 at 18:34
Yes, javascript doesn't know how to convert dictionaries (you could roll something, but it would be complicated). Here is another question which is a bit more applicable to your goal: http://stackoverflow.com/questions/3645939/can-you-convert-c-sharp-dictionary-to-javascript-associative-array-using-asp-net — Kyeotic, Jul 19 '12 at 18:36
i have convert it to json with the library called json.net, but i have yet a problem off how to display it with json — ucef, Jul 20 '12 at 10:03
Json.net is a good library, nice choice. If you post a short example of the JSON format, I will show you how to use it. — Kyeotic, Jul 20 '12 at 15:55

vadim · Accepted Answer · 2012-07-27T08:26:25.683

I assume your dictionary item looks like this class:

function DictionaryItem(key, value) {
                this.key = key;
                this.value = value;
            }

Where value is your BuzzCompaignModel that looks like this:

function BuzzCompaignModel(id, name, description) {
            this.id = id;
            this.name = name;
            this.description = description;
        }

After assigning collection of DictionaryItem with initialized BuzzCompaignModel you can bind this array with the following way:

    <table>
        <tbody data-bind="foreach:BuzzCompaignByInterest">

            <tr>
                <td data-bind='text:key'></td>
                <td data-bind='text:value.id'></td>
                <td data-bind='text:value.name'></td>
                <td data-bind='text:value.description'></td>
            </tr>
        </tbody>
    </table>

Also jsfiddle with example

bind and Display dictionary with knockoutjs

1 Answers1