CODEWITHSUNDEEP
javascriptknockout.js
Dellirium
Dellirium

Reputation: 1516

Knockout.js foreach error

TLDR: Knockout doesn't understand the binding in options when it is in a foreach context.

I have the following HTML:

<!-- ko foreach: getModelData(123).Filters.Products.ORDER -->
        <div class="row Filter">
            <div class="col-7">
                <select required data-bind="options: $root.getModelData(123).DataSets.Products_ORDER,
                optionsText: $root.getModelData(123).DataSets.Products_ORDER.Text,
                optionsValue: $root.getModelData(123).DataSets.Products_ORDER.Field,
                value: Field"></select>
            </div>
            <div class="col-3">    
                <select required data-bind="value: Order"> 
                        <option value="" disabled selected>Choose...</option>
                        <option value="ASC">Ascending</option>
                        <option value="DESC">Descending</option>
                </select>    
            </div>
            <div class="col-2">
                <a href=""><img src="images/CmdDelete.svg" alt="remove" width="20" height="20"></a>
            </div>
        </div>
<!-- /ko -->

Now, the getModelData(123) is a custom function within the viewModel that is bound to this entire thing. It basically returns a subset of the viewModel. The data that acompanies this structure is something like this:

{
Filters: {
  Products: {
    ORDER: [],
    WHERE: [],
    LIMIT: [],
    },
  someMoreDatasets...
},
DataSets:{
  Products: { /* some data, irrelevant for this */}
  Products_ORDER: [
    {Field: "value", Text: "Option 1"},
    {Field: "valu2", Text: "Option 2"}
    ]
  }
}

Disclaimer: This is all hand typed so there might be some 'textual errors' but they are most likely not the cause of the error I get on the page because it is all drawn from a database.

The IDEA is:

There is a button which allows you to "add more filters" to your data. Whenever this button is pressed, a new object that looks like {Filter: "", Order: ""} is pushed to an observable array located here: Filters.Products.ORDER which is the array which should contain the information about what filters the client selected. Meanwhile, the select within this HTML is bound to an array located here: DataSets.Products_ORDER from which it draws the information on what the possible selection options are.

This, due to foreach binding, creates a new set of HTML tags for your filtering. It creates a filter like shown below. This filter was created by the button press so it foreach binding works.

enter image description here

This dropdown-box is even populated by the correct amount of objects (though their display is not as expected, so this is issue#1) which leads me to believe that the binding syntax for the options on the select is correct, but why does the same syntax when going 1 level deeper not display properly, i do not know.

The issue#2 comes in the binding of the Field value, which might be fixed automatically when issue#1 is resolved. When the add new filter is pressed. The knockout throws an error that goes like:

enter image description here

This binding is on the same select element within the foreach loop, and is suppose to reference the element on which the loop is being executed on. But for some reason the entire object is not seen or it is not in context.

Any ideas?

EDIT: So yeah typically.... been bugging me the whole day, as soon as I post it I found the issue (at least partially). The Field binding thing is fixed. Was suppose to be a Filter since the dataset used for binding the foreach doenst have a Field but a Filter instead. The [Object object] issue still remains though, ideas?

Upvotes: 0

Views: 279

Answers (1)

tyler_mitchell
tyler_mitchell

Reputation: 1747

This should be your option binding:

<select required data-bind="options: $root.getModelData(123).DataSets.Products_ORDER,
            optionsText: 'Text',
            optionsValue: 'Field',
            value: Filter"></select>

Upvotes: 1

Related Questions