What is the best method for organizing data in rows and columns?

I attempted to use my map function to iterate over the data and display it, but I struggled to format it into rows and columns. The requirement is for 5 fixed columns with dynamically changing rows, making array indexing impractical.

Here is the code snippet - Link

let array = [
    // Array contents here
]

var num = array.map(function(subarray){
  return subarray
  })


for(i=0;i<num.length;i++){
  for(j=0;j<5;j++){
    console.log(num[i][j])
  }
}

The current output is visible in the following image

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

However, I aim to achieve a layout similar to the one shown below, featuring 5 columns with dynamic rows fetched from a RestApi.

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

[Please note: both the values in the figure and the code are subject to change as they serve as reference points. The actual values are retrieved from a RestApi and will fluctuate.]

javascripthtmlcssreactjstailwind-css

Answer â„–1

Maybe you can try the following steps:

var myList = [
    [
        72.3474349975586,
        83.77342224121094,
        83.77342224121094,
        72.3474349975586,
        97.0778579711914
    ],
    // more data arrays here...
];
   createTable = function(data){
             var cols = row => row.map(cell => `<td>${cell.toFixed(4)}</td>`).join(""),
                 rows = tableData => tableData.map(row => `<tr>${cols(row)}</tr>`).join("");
             return `<table><tbody>${rows(data)}</tbody></table>`;
           }
document.write(createTable(myList));
td { border: 1px solid red;
     text-align: right
   }

Answer â„–2

This is a representation of an empty table with 5x5 cells:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
 <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

To create this table, you will need a component for generating a td and another for generating a row tr. Then, you can generate as many rows as needed.

Answer â„–3

Are you looking for this?

let nestedArray = [
  [72.3474349975586, 83.77342224121094, 83.77342224121094, 72.3474349975586, 97.0778579711914],
  [80.1422348022461, 93.16133117675781, 93.16133117675781, 80.1422348022461, 108.54068756103516],
  [108.37809753417969, 125.22685241699219, 125.22685241699219, 108.37809753417969, 147.92010498046875],
  [163.5850372314453, 197.7432098388672, 197.7432098388672, 163.5850372314453, 228.80577087402344],
  [198.08128356933594, 236.1764678955078, 236.1764678955078, 198.08128356933594, 276.9237060546875],
  [126.81776428222656, 147.2906951904297, 147.2906951904297, 126.81776428222656, 174.1883544921875],
  [95.24028778076172, 110.93660736083984, 110.93660736083984, 95.24028778076172, 129.43946838378906],
  [95.24028015136719, 110.93661499023438, 110.93661499023438, 95.24028015136719, 129.43946838378906],
  [126.8177719116211, 147.2906951904297, 147.2906951904297, 126.8177719116211, 174.1883544921875],
  [198.081298828125, 236.176513671875, 236.176513671875, 198.081298828125, 276.9237060546875],
  [163.5850372314453, 197.74327087402344, 197.74327087402344, 163.5850372314453, 228.80577087402344],
  [108.37812042236328, 125.22686767578125, 125.22686767578125, 108.37812042236328, 147.92013549804688],
  [80.1422348022461, 93.16131591796875, 93.16131591796875, 80.1422348022461, 108.54067993164062],
  [72.347412109375, 83.77342987060547, 83.77342987060547, 72.347412109375, 97.07785034179688],
  [80.1422348022461, 93.16131591796875, 93.16131591796875, 80.1422348022461, 108.54067993164062],
  [108.37812042236328, 125.22686767578125, 125.22686767578125, 108.37812042236328, 147.92013549804688],
  [108.37809753417969, 125.22685241699219, 125.22685241699219, 108.37809753417969, 147.92010498046875],
  [80.1422348022461, 93.16133117675781, 93.16133117675781, 80.1422348022461, 108.54068756103516]
];

var flattenedArray = nestedArray.map(function(subarray) {
  return subarray;
});

for (i = 0; i < flattenedArray.length; i++) {
  let rowValues = '';
  for (j = 0; j < 5; j++) {
    if (rowValues) {
      rowValues += ', ';
    }
    rowValues += flattenedArray[i][j];
  }
  console.log(rowValues);
}

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

Show a mpld3 graph in an HTML page using the Django framework

Incorporating mpld3 to showcase matplotlib charts within an HTML page through django has been my recent focus. I utilize the mpld3.fig_to_dict method to convert a matplotlib figure into a JSON string and store it in a variable. However, I am encountering ...

javascriptpythonjsondjangomatplotlib

Displaying a list of images in a single line using React's Material UI

Is it possible to avoid the scroll bar in React Material UI below the image list? I am looking for a way to display multiple images in a single line without overflowing (overflow x). https://i.stack.imgur.com/mTMzZ.png const useStyles = makeStyles((theme) ...

reactjsmaterial-uireact-material-ui-carousel

How to create an HTML hyperlink in CakePHP version 2.2.1 and above?

Is there an easy way to create an HTML link using the HtmlHelper class in CakePHP 2.2.1? Let's say I have a route set up that maps /finest-perfumes-ever-2012 to the Perfumes/Index Controller/Action. I want the generated link to be: somedomain.com/f ...

htmlcakephphyperlinkhtml-helpercakephp-2.2

What is the process of initiating a dialog from a function in react?

I've been utilizing this code to develop my scheduler application. Here is the code snippet from my current project - Scheduler.js class CalendarScheduler extends Component { state = { viewModel: schedulerData, showBookingDialog: true, } ha ...

reactjsdialogmaterial-uischedulerreact-props

Is there a way I can turn off the dragging functionality in my situation?

Is there a method to disable the dragging functionality within a draggable element? $('#dragitem').draggable({ scroll : false, drag: function(event, ui){ //check if condition is met if(†...

javascriptjqueryhtmlcssjquery-ui

What is the best approach for retrieving a User from my Angular front-end service?

INQUIRY: I'm attempting to retrieve the details of the currently logged in user in my Angular 2 frontend service with the following code: UserModel.findById(userID, function (err, user) { It appears that this behavior is achievable from the browse ...

javascriptmongodbangularmongoose

Vertically animating an image using jQuery

I have been experimenting with trying to make an image appear as if it is floating by using jQuery to animate it vertically. After some research, I stumbled upon this thread: Animating a div up and down repeatedly which seems to have the solution I need. H ...

javascriptjqueryhtmlcssjquery-animate

Enhance the Component Props definition of TypeScript 2.5.2 by creating a separate definition file for it

I recently downloaded a NPM package known as react-bootstrap-table along with its type definitions. Here is the link to react-bootstrap-table on NPM And here is the link to the type definitions However, I encountered an issue where the types are outdate ...

reactjstypescripttypescript2.0react-bootstrap-table

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

The responsiveness of Bootstrap 5 footer needs improvement

I am currently developing a website using Bootstrap 5, HTML, and CSS. I've encountered an issue where the columns in the footer don't align properly when the screen size is reduced. Surprisingly, the columns line up correctly on mobile-sized and ...

htmlcssresponsive-designfrontendbootstrap-5

Explore the world of textures transferring from Maya to Three.js

I'm looking to convert a Maya model to JavaScript for a simple model with textures. The conversion works fine, but the textures are not showing up. Here is my code: var loader = new THREE.JSONLoader(); loader.load( "models/t2.js", function(geometry) ...

javascriptthree.jsmaya

Retrieving Records within a Specific Date Range for Check-ins and Check-outs

Our team is currently working on developing booking software that requires handling different room pricing based on specific dates. Each room has distinct pricing for weekdays and weekends. ROOM 1 Pricing 1: September 1st - November 3rd, Weekday: $100, W ...

javascriptc#jqueryasp.netasp.net-core

Attempting to eliminate the vertical scroll on my page that matches the height of the navigation bar

I am struggling with the alignment of a login page form that needs to be centered both horizontally and vertically, while allowing for slight scrolling down to accommodate the navigation bar height. I have attempted to adjust the classes and style height ...

htmlcssforms

Running yarn build in react results in CSS modifications

When working in my local development environment, I have everything functioning as intended. However, after executing yarn build, all of my styles appear drastically different. The project was set up using create-react-app and styled with regular CSS. Bel ...

cssreactjscreate-react-appyarnpkg

Utilizing variables in GraphQL requests

UPDATE: see the working code below GraphiQL Query I have this query for retrieving a gatsby-image: query getImages($fileName: String) { landscape: file(relativePath: {eq: $fileName}) { childImageSharp { fluid(maxWidth: 1000) { base64 ...

javascriptreactjsgraphqlgatsby

Dealing with AngularJS: Overcoming Lexer Errors When Passing Email Addresses for Regex Validation in Functions

Trying to pass an email address to an AngularJS function has been my recent challenge. Below is a snippet of the code I've been working on. <script> //For simplicity, descriptions for the module and service have been omitted this.sendEmail = f ...

javascriptangularjs

Next.js has a problem where it displays incorrect data when users navigate rapidly between pages

An unusual challenge has emerged while rendering data on a Next.js page in my application. Here's the scenario: I've created a Next.js page that showcases customer details based on a query parameter called cid. The page retrieves customer data an ...

javascriptreactjsnext.jsreact-hooksaxios

An issue arose in nodejs when attempting to use redirect, resulting in the error: "Error [ERR_HTTP_HEADERS_SENT]: Unable to modify headers after they have

I am currently working on a project where I encountered an unexpected error. My goal was to redirect the server to specific routes based on certain conditions, but I am facing difficulties. routes.post("/check", (req, res) => { console.log(& ...

javascriptnode.jsexpresshttp-redirect

Exploring nested objects and arrays with Plunker - extracting their values

I have retrieved two arrays, each containing nested objects, from API endpoints. One array (preview) consists solely of numbers. For example: [{ obj1:[1, 2], obj2:[3, 4] }] To obtain strings associated with IDs, I made another call to a different en ...

javascriptarraysangular

Exploring Typescript within React: Creating a property on the current instance

Within my non-TypeScript React component, I previously implemented: componentWillMount() { this.delayedSearch = _.debounce((val) => { this.onQuerySearch(val); }, 1000); } This was for debouncing user input on an input field. The corres ...

javascriptreactjstypescript