Using data-binding to loop through multiple arrays with the {foreach: ...} directive

Question

Using data-binding to loop through multiple arrays with the {foreach: ...} directive

Can the data-bind: foreach be used with multiple arrays simultaneously?
For example:

<div data-bind="foreach: arrayone, arraytwo">
   //do stuff
</div>

If it is possible, what is the proper syntax to achieve this? Or is there a different approach that should be taken (other than combining the two arrays)?

javascript knockout.js

Answer 1

Answer №1

There may not be an official method to accomplish this, but one workaround is to utilize $index in conjunction with foreach on the lengthier array. Here's an example:

var dataModel = function() {
  var self = this;
  
  self.firstArray = ko.observableArray([1,2,3, 5, 6]);
  self.secondArray = ko.observableArray([1,2,3,4]);
}

ko.applyBindings(new dataModel());

span {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<br/>

<div data-bind="foreach: (firstArray().length > secondArray().length ? firstArray : secondArray)">
  Index: 
  <span data-bind="text: $index"></span>,
  
  Array 1: 
  <span data-bind="text: $root.firstArray()[$index()]"></span>,
  Array 2: 
  <span data-bind="text: $root.secondArray()[$index()]"></span>,
  Longer array: 
  <span data-bind="text: $data"></span>,
  Shorter array: 
  <span data-bind="text: ($root.firstArray().length < $root.secondArray().length ? $root.firstArray()[$index()] : $root.secondArray()[$index()])"></span>
  <br/>
</div>

Answer 2

There may not be an official method to accomplish this, but one workaround is to utilize $index in conjunction with foreach on the lengthier array. Here's an example:

var dataModel = function() {
  var self = this;
  
  self.firstArray = ko.observableArray([1,2,3, 5, 6]);
  self.secondArray = ko.observableArray([1,2,3,4]);
}

ko.applyBindings(new dataModel());

span {
  font-weight: bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<br/>

<div data-bind="foreach: (firstArray().length > secondArray().length ? firstArray : secondArray)">
  Index: 
  <span data-bind="text: $index"></span>,
  
  Array 1: 
  <span data-bind="text: $root.firstArray()[$index()]"></span>,
  Array 2: 
  <span data-bind="text: $root.secondArray()[$index()]"></span>,
  Longer array: 
  <span data-bind="text: $data"></span>,
  Shorter array: 
  <span data-bind="text: ($root.firstArray().length < $root.secondArray().length ? $root.firstArray()[$index()] : $root.secondArray()[$index()])"></span>
  <br/>
</div>

Using data-binding to loop through multiple arrays with the {foreach: ...} directive

Answer №1

Similar questions

import all mongoose models in the express app.js

Arranging a group of objects in Angular2

Tips for formatting JSON using jQuery

Display error messages in Vue.js

Utilize .GLB and Blender file formats within a Gridsome project developed with Vue.js

The Jquery .remove() function will only take effect after the second click

Learn how to utilize DataTable in R Shiny to connect rowCallback and formatStyle functions for customizing the appearance and presentation of your data

Is it possible for an HTML number input's arrows to change in increments that are different from its designated step attribute?

Timeout error of 10000ms occurred while using await with Promise.all in Mocha unit tests

What is the best way to flatten object literal properties?

Initiate the countdown when the button is pushed

Using the default object as a parameter in an ES6 function call is successful, whereas simply passing it as a

Is it possible to modify a portion of the zod schema object according to the value of a

Looping through multiple table rows with AngularJS ng-repeat

Deploying an Express.js application: The command 'PassengerAppRoot' is invalid, possibly due to a misspelling or being defined by a module not included in the server configuration

Utilizing the map() function to parse a Json object

Tips for choosing a selection of items using the mouse (such as a calendar date range picker)

Get the value of an HTML element

Is there a way to lower the cost with the same value that was used to raise it?

Customizing CSS to differentiate the color of active card headers in a Bootstrap accordion