Split the data binding of KnockoutJS into table C#

Question

I have a tag with data-bind = "value: contents" for an input tag in KnockOutJS

<input type="text" class="form-control" data-bind="value: contents" />

It displays in following format {"key1":"value1","key2":"value2"}

I'm building a table with name and value then split those keys and values separately and display in TDs

<td>
    <strong>
         <span id="textKey" data-bind="text: displayKey" />    
    </strong>
</td>

<td>
         <input id="textValue" type="text" data-bind="value: displayValue" />
</td>

Could you help me some ideas of how I can split those keys and values into Dictionary<> and into columns and rows in my case?

Thank you

For conversion into dictionary, you can check this thread http://stackoverflow.com/questions/23873562/parse-json-in-knockout-into-dictionary-key-value-in-c-sharp/23875302#23875302 — GôTô, Jun 02 '14 at 08:09
Hi @GôTô infact, it was me again in your previous post and thanks a lot for your help, but now Im facing one thing that the data of keys and values are not coming from the predefined value in the JS, it comes from the data-bind of the input tag, and I have no right to modify the "contents" in data-bind, so now I wonder if I can put the mapDictionaryToArray(contents) right in the cshtml input tag ? — TrangZinita, Jun 02 '14 at 08:24

score 1 · Answer 1 · answered Jun 02 '14 at 09:15

If you want to use Knockout to populate a HTML table, you can use an observableArray with a foreach data binding. See here for a working JSFiddle, which uses the below code:

View Model:

var vm = {
    contents: ko.observableArray([{
        "displayKey": "Fruit",
        "displayValue": "Bananas"
    }, {
        "displayKey": "Colour",
        "displayValue": "Red"
    }, {
        "displayKey": "Car",
        "displayValue": "Ferrari"
    }])
};
ko.applyBindings(vm, document.body);

HTML:

<textarea style="width: 500px; height: 90px;"
data-bind="value: JSON.stringify(ko.toJS(contents()))"></textarea>

<table>
    <tbody data-bind="foreach: contents">
        <td> <strong>
                 <span id="textKey" data-bind="text: displayKey" />    
            </strong>
        </td>
        <td>
            <input id="textValue" type="text" data-bind="value: displayValue" />
        </td>
    </tbody>
</table>

Thank you, it works perfectly, unfortunately in my case the keys sometimes are not fixed as I have checked again, they are not the same as sometimes I have the data like this : "{\"reference\":\"8542\",\"rion_id\":\"9861\"}" so in the table, I couldn't fix the displayKey I think — TrangZinita, Jun 02 '14 at 09:24

score 1 · Accepted Answer · answered Jun 02 '14 at 09:33

If you do not have control over the structure of contents, you can use the conversion to array created in your previous thread like this:

Html

<table>
    <tbody data-bind="foreach: mapDictionaryToArray(contents())">
        <tr>
            <td> <span id="textKey" data-bind="text: $data.key"></span>

            </td>
            <td>
                <input id="textValue" type="text" data-bind="value: $data.value" />
            </td>
        </tr>
    </tbody>
</table>

ViewModel

var viewModel = {
        contents: ko.observable({
            "reference": "2Z94",
                "car_id": "9861"
        }),
        mapDictionaryToArray: function (dictionary) {
            var result = [];
            for (var key in dictionary) {
                if (dictionary.hasOwnProperty(key)) {
                    result.push({
                        key: key,
                        value: dictionary[key]
                    });
                }
            }
            return result;
        }
    };

jsFiddle

Thanks GoTo, I have split the js into multiple files: like in this example, but then I still cannot get the data from the converted dictionary, could you have a look at those files here : http://notepad.cc/temobu53 Thanks — TrangZinita, Jun 03 '14 at 12:18

Split the data binding of KnockoutJS into table C#

2 Answers2

Linked