KnockoutJS foreach on individual element of nested array

Question

I am on a project attempting to render search filter facets for a given query, but the rules are such that I cannot simply use nested ko: foreachstatements, as different result sets have different display rules for them.

The object I am mapping looks as follows:

FacetResults: ko.observableArray([
{
   Term: 'myTerm',
   Values: [{'key1': 5}, {'key2': 13}]
},
{  Term: 'myTerm2',
   Values: [{'key3': 6}, {'key4': 42}]
}]);

Basically, what I am trying to accomplish is something like

<!-- ko foreach: FacetResults()[0] -->
   <span data-bind="text: Term"></span>
   <ul data-bind="foreach: Values">
    <!-- do something -->
   </ul>
<!-- /ko -->

But am unable to do this without getting the 'unable to parse bindings' error.

I am able to do something like

<span data-bind="text: FacetResults[0]"></span>

and return 'Object object', but once I do <span data-bind="text: FacetResults[0[].Term" </span>, I get the same broken bindings error.

I have given thought to just breaking the result sets up into a number of observableArrays to avoid this, but are a use cases that do not require special presentation logic where I can make use of nested ko: foreach loops, and so I would like to stick to one array if possible (especially considering the data types returning will always be the same and save me from parsing these when they return from the call).

For what it's worth, I'm also able to inspect the objects at runtime, and have asserted that FacetResults[0].Term is a valid field through console.log(vm.FacetResults()[0].Term); without issue.

Any help will be appreciated. Thanks!

tcigrand · Accepted Answer · 2015-06-04 19:44:34Z

2

I believe you're looking for the with binding.

The with binding creates a new binding context, so that descendant elements are bound in the context of a specified object.

This should work for you

<!-- ko with: FacetResults()[0] -->
   <span data-bind="text: Term"></span>
   <ul data-bind="foreach: Values">
    <!-- do something -->
   </ul>
<!-- /ko -->

answered Jun 4, 2015 at 19:44

tcigrand

2,3872 gold badges16 silver badges26 bronze badges

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

1 Comment

gutsmania Over a year ago

yep, that was exactly it. Instant facepalm, thanks!

Collectives™ on Stack Overflow

KnockoutJS foreach on individual element of nested array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related