KnockoutJS foreach loop to limit to first array

Question

I am using KnockoutJS to render a JSON. Certain results have more than 1 "Applications". Is it possible to make it in the foreach so that it only returns 1 only always? Whichever one comes first.

In example below, TEST1 has 2 results under Applications. I would just like to show one in the rendering.

HTML

<table>
<thead>
<tr>
<th>AppId</th>
<th>Name</th>
<th>App Token</th>

</tr>
</thead>
<tbody data-bind="foreach: { data: APPS, as: 'APP' }">
  <tr data-bind="foreach:  Applications">
    <td><span data-bind="text: appId"></span></td>
    <td><span data-bind="text: $parent.name"></span></td>
    <td><span data-bind="text: AppToken"></span>
  </tr>
</tbody>
</table>

JSON

{
   "APPS":{
      "bad":{
         "Name":"TEST1",
         "Applications":[
            {
               "AppId":"bab",
               "AppToken":null
            },
            {
               "AppId":"bab",
               "AppToken":null
            }
         ]
      },
      "good":{
         "Name":"TEST2",
         "Applications":[
            {
               "AppId":"bab",
               "AppToken":null
            }
         ]
      }
   }
}

Maybe something like data-bind="with: Applications[0]" instead of foreach? — jonhopkins
– jonhopkins, Commented Mar 15, 2013 at 17:05

Sujesh Arukil · Accepted Answer · 2013-03-15 20:13:53Z

4

APPS is not an Array, so you cannot loop through it. Applications is, you can loop through it. But since you want it to be the first item, just use With binding for both APPS and Applications.

Also, correct the case for your bindings in your HTML. Another thing, the Applications array is off of the "good" or "bad" property of "Apps", so you have to qualify it as such.

Here is a fiddle for the same.

http://jsfiddle.net/sujesharukil/tyJwX/1

<tbody data-bind="with: APPS.bad">
    <tr data-bind="with:  Applications[0]">
        <td><span data-bind="text: AppId"></span></td>
        <td><span data-bind="text: $parent.Name"></span></td>
        <td><span data-bind="text: AppToken"></span></td>
  </tr>
</tbody>

edited Mar 15, 2013 at 20:13

answered Mar 15, 2013 at 18:29

Sujesh Arukil

2,46919 silver badges37 bronze badges

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

4 Comments

jonhopkins Over a year ago

Only the first binding (AppId) in your fiddle is working. Can you update the fiddle so they're all working?

jonhopkins Over a year ago

I wonder why that change made a difference. Seems like both versions should have done the same thing. But +1 for making it work

Sujesh Arukil Over a year ago

Well, yes and no. The first version, the context that was passed in does not know the parent, because when I did this data-bind="with: bad.Applications[0], there is no $parent. The context does not exist. When I changed it to this with: Applications[0] and moved bad to the upper level, now I have the context for the parent (which is "bad" property) and hence can now read the "Name" property off of that.

jonhopkins Over a year ago

Right... That makes sense. Can't believe I missed that haha

Community · Accepted Answer · 2017-05-23 11:57:26Z

0

Okay, I used:

<!-- ko if: $index() === 0 -->

Got answer from here. knockout.js using $index with if binding

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Mar 15, 2013 at 18:38

Scott Yu - builds stuff

11.8k8 gold badges44 silver badges55 bronze badges

2 Comments

Sujesh Arukil Over a year ago

don't do that. You will still be looping through the entire Applications. And if you have let say a few 100 of them, you will loop through, do a condition check for every single item. Instead, just use a data-bind="with: bad.Applications[0]"

jonhopkins Over a year ago

This was actually my last resort suggestion if you couldn't get the with binding to work. But it was a last resort for the exact reason @SujeshArukil just pointed out

Collectives™ on Stack Overflow

KnockoutJS foreach loop to limit to first array

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related