How to compare two data while data-binding in nested for loop in knockout - data-binding

Question

Let there be a JSON file containing :
{
"First" : [
"A",
"B",
"C"
],
"Second" : [
{ "name" : "A"},
{ "name" : "C"}
]
}
Now, below is a small part of my HTML code to show what I am trying to achieve :
<span data-bind="foreach: First">
<span data-bind="foreach: Second">
//if First.A === Second.name then do something
</span>
</span>
How do i do that comparison ?
I tried many things but couldn't figure out the correct way.
I know $data can be used to access the value of "First" here but what to use in this nested loop ?
I am new to this. Any suggestion will be highly appreciated.
Just a little more information:
My HTML code is actually something like this :
<span data-bind="foreach: first">
<tbody data-bind="foreach: $root.second">
<tr data-bind="if: $parent === $data.name">
//do something
</tr>
</tbody>
.
.
.
</span>
This doesn't work.

Answer 1

First, the html at the end of your question is not valid: you can't have a tbody in a span (try it: you'll see the browser ignores the tbody).
Now, to your question: I coded a view model that resmebles your case, and an according html.
What's important to understand here is that $parent refers to the view model object in the parent context . Thus, in the following html, the $parent in foreach: $parent.seconds refers to myVM context, while the $parent in the if: $parent refers to the firsts context.
var myVM = function () {
var self = this;
self.firsts = ['A', 'B', 'C'];
self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: firsts">
<span data-bind="foreach: $parent.seconds">
<span data-bind="if: $parent == $data.name">hello!</span>
</span>
</span>
There are other ways to code it, and another one would be - if it's more convenient for you - changing $parent.seconds to $root.seconds (and get the same result):
var myVM = function () {
var self = this;
self.firsts = ['A', 'B', 'C'];
self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: firsts">
<span data-bind="foreach: $root.seconds">
<span data-bind="if: $parent == $data.name">hello!</span>
</span>
</span>
Moreover, we can improve readability by adding aliases:
var myVM = function () {
var self = this;
self.firsts = ['A', 'B', 'C'];
self.seconds = [{ "name" : "A"}, { "name" : "C"},];
};
ko.applyBindings(new myVM());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<span data-bind="foreach: { data: firsts, as: 'first' }">
<span data-bind="foreach: { data: $root.seconds, as: 'second' }">
<span data-bind="if: first == second.name">hello!</span>
</span>
</span>