https://stackoverflow.com/questions/52338457/knockout-js-foreach-not-giving-errors-and-not-showing-results

by jlspake

HTML

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

<div class="assist-entry">
  <div class="box box--milder assist__parcel-list" style="margin-top: 50px">
    <header class="box__header box--milder__header">
      <h4 class="box__title box--milder__title">
        Parcels: <span data-bind="text: parcels().length"></span>
      </h4>
    </header>

    <div class="box__body">
      <div class="wrap" data-bind="foreach: parcels">
        <div class="parcel">
          <header>
            <h5 class="parcel-id">
              <span class="lab">Parcel:</span>
              <span data-bind="text: Id"></span>
            </h5>
          </header>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

var that = { ctrls: {} };
var data = [
	{ 'Id':'1' },
  { 'Id':'2' },
  { 'Id':'3' }
];
that.ctrls.parcels = ko.observableArray([]);
data.forEach(function(d) {
  var pMapped = ko.mapping.fromJS(d);
  that.ctrls.parcels.push(pMapped);
});
ko.applyBindings(that.ctrls, document.getElementsByClassName('assist-entry')[0]);