knockout.js (2.2.0) How to get data from Json Array using dropdown

Question

WORKING DEMO

I'm facing the following problem:
I have an json array:

self.customExportFileArray = ko.observableArray([
      {
        "IncludeInExportConversionTypesSelectList" :
          [
            {
              "ConversionGroupID" : 1,
              "Title" : "Quote Start - Auto"
            },
            {
              "ConversionGroupID" : 2,
              "Title" : "Quote Finish - Auto"
            },
            {
              "ConversionGroupID" : 5,
              "Title" : "Sales Data"
            }
          ],
        "ChooseFromConversionTypesSelectList" : [],
        "FileName" : "Template1",
        "FileFormat" : "Excel",
        "FilterSettings" : true,
        "ComparisonMetrics" : false
      },
      {
        "IncludeInExportConversionTypesSelectList":
          [
            {
              "ConversionGroupID" : 1,
              "Title" : "Quote Start - Auto"
            },
            {
              "ConversionGroupID" : 5,
              "Title" : "Sales Data"
            }
          ],
        "ChooseFromConversionTypesSelectList":
          [
            {
              "ConversionGroupID" : 2,
              "Title" : "Quote Finish - Auto"
            }
          ],
        "FileName" : "Template2",
        "FileFormat" : "CSV",
        "FilterSettings" : false,
        "ComparisonMetrics" : true
      }
    ]);
}

And I have some HTML Code which contains one dropdown, text box, few radio-buttons and Two List controls. So, the point is: Dropdown should contain as many Items as customExportFileArray array's length, and Item name (optionsText) should be FileName property from array. (Looks like it work now). Next, If change the Item from dropdown, let's say Template1 File Name textbox should be filled by FileName property from array (Template1), Excel radiobutton should be checked, Keep filter settings should be checked, Compatison Metrics should be unchecked and 'Conversion Types to Choose From' should contain a list of IncludeInExportConversionTypesSelectList array (Text = Title)
But if to see in my HTML Code I'm doing something wrong, but don't know what exactly. It doesn't load specific data by changing Item from dropdown, but I thought that I'm doing all in a right way.
Additional question: How to save changes for specific Item array (I mean, for example you changed the name, or changed checked radiobutton).
Any help would be highly appreciated.

Thanks in advance.

WORKING DEMO

beyond-code · Accepted Answer · 2012-12-03 20:04:46Z

3

You need to be binding the value of the drop down to an observable property called something like 'SelectedTemplate' to store the selected value, then binding the changeable fields to the selected object:

<select data-bind="options: customExportFileArray, optionsText: function(item) { return item.FileName }, value: selectedTemplate">

<input type="text" data-bind="value: selectedTemplate().FileName"/>

self.selectedTemplate = ko.observable();
self.customExportFileArray = ko.observableArray([
      {
       ....

I have modified your jsfiddle as follows: http://jsfiddle.net/ptmwr/11/

As you can see, the values binding of the drop down now points at this new property, and I had to change the way the optionstext binds to work with the object as a value.

EDIT:

Also you are trying to bind a boolean to RadioButton's checked property, which they are not really designed for. If you want to bind to a boolean property then you should use checkbox control instead as this is either on or off.

Hope this helps!

edited Dec 3, 2012 at 20:04

answered Dec 3, 2012 at 19:00

beyond-code

1,4221 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pavlo Over a year ago

Thank you so much Roysvork!!! The last question to you and I will close current question. I've updated jsFiddle by your recommendation, but I can't understand why Filter Settings, Comparison Metrics and Include in Export List doesn't work at all Here is the link to updated DEMO. Thank you.

beyond-code Over a year ago

I'm just having a look... but to test my psychic powers have you got the brackets right? : )

beyond-code Over a year ago

Ahh no brackets look fine. Whats happening is that knockout doesn't know how to map from the boolean values to what you have defined as your values for the radio buttons. If you set values on those then hopefully that should work...

beyond-code Over a year ago

Sorry that was a red herring. I will update the answer with an Edit explaining.

Pavlo Over a year ago

Thank you Roysvork again for your help!!! Regarding Why List didn't display Items - it was an issue related to sortable, probably I've missed some library, anyway Thanks for your help! :)

|

Collectives™ on Stack Overflow

knockout.js (2.2.0) How to get data from Json Array using dropdown

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related