Tips for iterating through the properties of every object within a Knockout observableArray and dynamically generating a table

My observableArray is dynamically populated with SQL data, resulting in varying columns each time.

I am trying to present the SQL results in an HTML table but facing issues with the code below.

This is the desired output format...

https://i.sstatic.net/dc7rE.png

var viewModel = function(data) {
    var self = this;
   
    // variables   
    self.taskRecordOverview = ko.observableArray([
    {
        "Entity": "DEMO",
        "Period": "2017-07-31T00:00:00",
        "Level": "Level 3",
        "Addendum Errors": null,
        "Cash Process": "Created",
        "Corporate Actions": null,
        "Expenses": null
    },
    {
        "Entity": "DEMO",
        "Period": "2017-07-31T00:00:00",
        "Level": "Level 5",
        "Addendum Errors": "Created",
        "Cash Process": "Created",
        "Corporate Actions": "Created",
        "Expenses": "Created"
    },
    {
        "Entity": "SP00",
        "Period": "2017-07-31T00:00:00",
        "Level": "Level 5",
        "Addendum Errors": "Created",
        "Cash Process": "Approved",
        "Corporate Actions": "Created",
        "Expenses": "Created"
    }
]); 
   
};

ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <thead>
    <tr>
      <th>??</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: taskRecordOverview">
    <tr>
      <td data-bind="text: $data"></td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/f79r4h2g/

javascriptjsonknockout.js

Answer №1

When using the foreach loop for the taskRecordOverview, make sure to iterate through the keys of each object and display their corresponding values. You can achieve this by utilizing Object.keys.

Here's a functional snippet:

var viewModel = function() {
  var self = this;

  self.taskRecordOverview = ko.observableArray([
    {
      "Entity": "DEMO",
      "Period": "2017-07-31T00:00:00",
      "Level": "Level 3",
      "Addendum Errors": null,
      "Cash Process": "Created",
      "Corporate Actions": null,
      "Expenses": null
    },
    {
      "Entity": "DEMO",
      "Period": "2017-07-31T00:00:00",
      "Level": "Level 5",
      "Addendum Errors": "Created",
      "Cash Process": "Created",
      "Corporate Actions": "Created",
      "Expenses": "Created"
    },
    {
      "Entity": "SP00",
      "Period": "2017-07-31T00:00:00",
      "Level": "Level 5",
      "Addendum Errors": "Created",
      "Cash Process": "Approved",
      "Corporate Actions": "Created",
      "Expenses": "Created"
    }
  ]);
};

ko.applyBindings(new viewModel());
td, th {
  border: 1px solid #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <thead>
    <!--Use only one object as header-->
    <tr data-bind="foreach:Object.keys(taskRecordOverview()[0]),visible:taskRecordOverview().length > 0">
      <th data-bind="text:$data"></th>
    </tr>
  </thead>
  <tbody data-bind="foreach: taskRecordOverview">
    <!--Obtain the keys in each object and loop through them-->
    <tr data-bind="foreach: Object.keys($data)">
      <!--Retrieve the value for a key-->
      <td data-bind="text: $parent[$data]"></td>
    </tr>
  </tbody>
</table>

Check out the fiddle here

If the nested $data and $parent binding contexts are unclear, you can use an alias with as for better clarity:

<table>
  <tbody data-bind="foreach: { data:taskRecordOverview, as: '_task'}">
    <tr data-bind="foreach: { data:Object.keys(_task), as: '_key'}">
      <td data-bind="text: _task[_key]"></td>
    </tr>
  </tbody>
</table>

Updated fiddle available here

This may be an old question, but it offers insights that could benefit others in the future :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Iterate through a JavaScript grid and display the items

I am attempting to iterate through a JavaScript table, aiming to display the elements located between two selections made by the user. Here is an example of the table structure: if the user selects IDs 2 and 5, the loop should display rows 3 and 4. I trie ...

javascriptarraysjson

Why is React App showing up twice on the webpage?

After successfully creating a React app based on Free Code Camp's Drum Machine project that passed all tests on Code Pen, I encountered an issue when transferring the code to Visual Studio. Surprisingly, the app now fails one test (#6) even though it ...

javascripthtmlreactjs

getting a simple three.js webgl demo up and running with sails.js

I'm attempting to integrate the basic webgl particle example from three.js into the sails.js framework activityOverlord example on the default welcome screen. First, I copy/paste the necessary three JavaScript libraries into the linker/js folder and a ...

javascriptlinkerthree.jssails.js

JavaScript XML Serialization: Transforming Data into Strings

When trying to consume XML in an Express server using express-xml-bodyparser, the resulting object is not very useful. This is the XML: <SubClass code="A07.0"/> <SubClass code="A07.1"/> <SubClass code="A07.2"/> <SubClass code="A07.3" ...

javascriptjsonxmlexpress

Creating elements with HTML using .createElement()

My goal is to use .createElement() from the wp.element to insert HTML, however it appears as text instead. Here's an example: wp.element.createElement( Meta, { className: 'TEST', title: 'TEST& ...

javascriptreactjs

Leveraging viewbag information in combination with jQuery JSON techniques

I have a desire to utilize my ViewBag within a JavaScript array. After researching on using viewbag with jquery asp.net mvc 3, I believe I found the code that suits my needs: @model MyViewModel <script type="text/javascript"> var model = @Html. ...

javascriptjqueryasp.netasp.net-mvcjson

Establish a predetermined selection for a drop-down menu

How can I set a default value for a dynamically filled dropdown menu featuring all 12 months in KnockoutJS? I want the default value to be the current month. This is how I am populating the dropdown with information: self.setMonthData = (data ...

javascriptjqueryhtmlknockout.jsdrop-down-menu

Combining multiple guides into one comprehensive list, learn the steps to generate a new JSON file and eliminate the final comma within the file

I have a large number of dictionaries and I created a new JSON file with those dictionaries. However, the dictionaries are not being added to one list. Additionally, when creating a new JSON file, it fails to remove the last comma. Below is an example of ...

jsonpython-3.xlistfiledictionary

A guide to retrieving JSON data with Javascript

I'm in the process of building a small website for weather forecasting. However, I've encountered an issue when trying to retrieve JSON data from accuWeather - I'm not getting any response. I've double-checked my request and it seems to ...

javascriptjsonxmlhttprequest

Phonegap experiencing issues with executing JavaScript code

My attempt to utilize phonegap is encountering an issue where my javascript is not running. Here's what I've tried so far: <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" / ...

javascriptioscordovaios7

Tips for passing parameters in an AJAX request

I have a single AJAX call that requires passing parameters to my function. Below is the AJAX call implementation: $.ajax({ url: 'lib/function.php', data: { action: 'getStoreSupplyItems', id: store_id, ...

javascriptphpjqueryajax

What is the most efficient way to establish a connection to "host:port" without relying on a web browser, utilizing only Node.js/JavaScript?

To establish a connection with a server (created using node js), we simply open the browser and include some code in a file like this: <script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script> <script type="text/javascript">/* ...

javascriptnode.jssocket.io

What is the process for implementing THREE.EdgesGeometry on a model imported using THREE.OBJLoader?

I have been attempting multiple times to add edges in a model loader using the OBJLoader, but I am unable to achieve it. Mloader = new THREE.MTLLoader(); Mloader.setPath( dir ); Mloader.load( mtl_dir, function ( materials ) { ...

javascriptthree.js

javascript Click to add a tag

I am currently using a rich text editor and I'm attempting to add a code tag feature to it. Currently, the editor has two buttons - one for underline and one for code. When I select text and click the underline button, the selected text will be under ...

javascriptjqueryhtml

Unveil Information with Underscore JS

I am attempting to showcase my data in a table using Underscore.js. Below is the div container class I am working with: <div id="container"></div> Upon window load, I have added an event listener: window.addEventListener("load", function(ev ...

javascript

The combination of WASM and Node.js encounters an issue when attempting to utilize 'import.meta' outside of a module

I successfully compiled the FastText C++ module to a wasm module using the provided make file, with the following flags: EMCXX = em++ EMCXXFLAGS = --bind --std=c++11 -s WASM=1 -s ALLOW_MEMORY_GROWTH=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['addOnPos ...

javascriptnode.jswebassemblyemscripten

Parent-Child Communication in VueJS 2.0: How to effectively pass data from the parent component

Does anyone know a straightforward solution to this issue? I've been struggling to find one. Within my HTML file, there's a button that looks like this: <button @click="showModal">Show Modal</button> By clicking on the button, it t ...

javascriptvue.jsvuejs2vue-component

React Hook Form is experiencing an excessive amount of re-renders which can lead to an infinite loop. React sets a limit on the number

Currently, I am working on displaying a field named party. Once this field is selected, a list of products should be rendered. In my project, I am using React Hook Form along with the watch hook to keep track of changes. <FormProvider {...methods}> ...

javascriptreactjsreact-hooksreact-hook-formreact-query

Overriding Styles Set by an External CSS file

Let's assume that I have two different style sheets set up on my webpage: site.css: .modal { position: absolute; width: 200px; ... } ... reset.css: .reset * { position: static; width: auto; ... } Unfortunately, I don ...

javascriptjquerycss

Utilizing jQuery to Determine Character Count

I've tried everything on the site, but nothing seems to be working. I'm attempting to create a function that triggers when the character count in a div exceeds a certain number, but it's not functioning as expected. Any assistance would be g ...

javascriptjquery