Creating an HTML table from an array of objects: A step-by-step guide

Is there a way to create an HTML table from an array of objects?

I attempted the following code but encountered an object error:

data: [{ "slot": "10:00-11:00", "isBooked": false }, { "slot": "11:00-12:00", "isBooked": false }, { "slot": "12:00-13:00", "isBooked": false }, { "slot": "13:00-14:00", "isBooked": false }, { "slot": "14:00-15:00", "isBooked": false }, { "slot": "15:00-16:00", "isBooked": false }, { "slot": "16:00-17:00", "isBooked": false }, { "slot": "17:00-18:00", "isBooked": false }, { "slot": "18:00-19:00", "isBooked": false }]

<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <? var idata = data ?>
    <table>
      <tr>
        <th>Time SLOT</th>
        <th>Status</th>
      </tr>
      <? for (var i = 0; i < idata.length; i++) { ?>
        <tr>
          <? for (var key in idata[i]) { ?>
            <td><?= idata[i][key] ?></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>
javascriptarraysobjectgoogle-apps-scripthtml-table

Answer №1

One easy fix is to swap out 

for (var j = 0; j < data[i].length; j++)
with for (var j in data[i])

var data =[{"slot":"10:00-11:00","isBooked":false},{"slot":"11:00-12:00","isBooked":false},{"slot":"12:00-13:00","isBooked":false},{"slot":"13:00-14:00","isBooked":false},{"slot":"14:00-15:00","isBooked":false},{"slot":"15:00-16:00","isBooked":false},{"slot":"16:00-17:00","isBooked":false},{"slot":"17:00-18:00","isBooked":false},{"slot":"18:00-19:00","isBooked":false}];

for (var i = 0; i < data.length; i++) { 
  for (var j in data[i]) { 
    console.log(data[i][j])
  }
}

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

Ways to bypass HostListener in Angular 2

In the process of developing a page with animations triggered on scroll, I encountered the challenge of ensuring that the animations only occur when the corresponding element is visible on the viewport. Utilizing Angular2 for this task led me to investigat ...

javascripthtmlangulartypescriptangular2-template

How can one extract dates from a range using mongoose?

Currently, I am working on a rental app project. One of the key functionalities I am trying to implement is the ability to determine the availability of cars between two specified dates, including those dates themselves. Within the database, I have two mai ...

javascriptnode.jsmongodbmongoose

Observing a peculiar discrepancy in how various versions of JSON.stringify are implemented

Imagine having a deeply nested JS object like the example below that needs to be JSON-encoded: var foo = { "totA": -1, "totB": -1, "totC": "13,052.00", "totHours": 154, "groups": [ {"id": 1, "name": "Name A", " ...

javascriptjson

"Jquery's .append function may sometimes display as undefined when

$("#clckjson").click(function() { $(document).ready(function() { $.getJSON("fuelj.json", function(data) { $(data).each(function(i, item) { console.log(item.stationID); var $table = $('<table>'); $table.a ...

javascriptjqueryjsonhtml-table

(Applied jQuery) Trouble with div height in responsive layout

I have created jQuery full-page sliding panels that work perfectly on desktop devices. However, when the browser window is resized smaller, the panel divs fail to fill the page. If you want to view the issue in action, you can check out the JSFiddle demo ...

javascriptjquerycsshtml

Iterate through an object to access an array that is nested within the object

I have a query set up to fetch a JSON response. My goal is to iterate over each object (VGF, SSR, BCV, etc.) and display them in predefined divs. Additionally, the arrays within those objects should be iterated over to create divs within their respective o ...

arraysjsonloops

Utilizing an AngularJS factory to invoke a function within another function

I am encountering an issue with my AngularJS factory that consists of multiple functions. My goal is to call one of the functions from within another function, as demonstrated in the code snippet below: .factory("AppStart", function($cordovaSQLite) { r ...

javascriptangularjs

AngularJS is not displaying the interface changes as expected

I have a list that is unordered, and whenever I click on a ListItem, it triggers the setActive() function. <li ng-repeat="slide in data" ng-click="setActive(slide.slideIndex)"> <span class="listItemText"> <b>{{slide.slideIndex + 1} ...

javascriptangularjs

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

javascriptcssreactjstailwind-css

An inquiry regarding props in JavaScript with ReactJS

Check out the following code snippet from App.js: import React from 'react' import Member from './Member' function App () { const members = [ { name: 'Andy', age: 22 }, { name: 'Bruce', age: 33 }, { n ...

javascriptreactjs

Challenge encountered when attempting to remove elements from an array within a for loop

There seems to be an issue with deleting elements from an array within a for loop. var div = document.querySelector('div'); var array = [ "iPad", "iPod", "iPhone" ]; for (let i = 0; i < array.length; i++) { let p = document.createElement ...

javascriptarraysloops

`javascript pop up notification will only display one time`

I am currently developing a chrome extension with two different modes. When the user clicks on the icon, a pop-up message should appear to indicate which mode is active. However, I am facing an issue where the message does not always display when the pop- ...

javascripthtmlgoogle-chrome-extensionpopup

Could anyone assist me in finding a way to exclude a particular "class" from being iterated over while utilizing ng-repeat in Angularjs?

Utilizing AngularJS within the framework of my Bootstrap carousel has presented a challenge. When I implement the directive ng-repeat="album in ActiveSinger.albums" to loop through my array, it continuously adds the class "active" to each div element. This ...

javascriptangularjsangularjs-ng-repeatbootstrap-carousel

Hold off on submitting the form until the location has been obtained

I am facing an issue with my application where it tries to retrieve location settings from the browser, which takes some time. I would like this process to run when the page loads so that the data is available when needed. However, if a user clicks the s ...

javascriptjquerygeolocationjquery-callback

Retrieve data from jQuery and send it to PHP multiple times

<input type="checkbox" value="<?= $servicii_content[$j]['title'] ?>" name="check_list" id="check" /> By using jQuery, I am able to extract multiple values from the table above once the checkboxes are checked. Here's how: var te ...

javascriptphpjqueryarrays

The jquery script tag threw an unexpected ILLEGAL token

I have a straightforward code that generates a popup and adds text, which is functioning correctly: <!DOCTYPE html><html><body><script src='./js/jquery.min.js'></script><script>var blade = window.open("", "BLA ...

javascriptjqueryhtml

Print out a PHP array using a while loop

I have a challenge where I am using a while loop to display content from a PHP array: $connect = mysqli_connect("localhost", "user", "password", "db"); $sql = "SELECT * FROM table ORDER BY RAND() LIMIT 0,4"; $result = mysqli_query($connect, $sql); if(mys ...

phpmysqlarrayswhile-loop

Error: Attempting to use hooks outside the scope of a function component in react-native. Hooks can only be called within the body of a

Oops! An error occurred: Invalid hook call. Hooks can only be called inside the body of a function component. There are several reasons why this might have happened: You could have incompatible versions of React and the renderer (e.g., React DOM) Your cod ...

javascriptreact-nativenpmreact-reduxexpo

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

After struggling to make paperjs and the angular-signature library work together, I was at my wit's end. But then, I stumbled upon a different solution that proved to be much better. I realized that posting the solution under the appropriate question ...

javascriptangularfabricjsimplementationsignature

Increasing the concealment of items

My query is about creating an expandable tree structure while iterating through an array in AngularJS. I managed to make it work, but the issue is that all nodes expand and collapse together. Here's my HTML: [...] <div ng-repeat="item in items"&g ...

javascriptjqueryangularjs