Present the retrieved JSON data values in an alternative layout on the table

I am facing an issue with the data display in my current table setup. The data is fetched from an SQL server, encoded into JSON format, and the structure of the JSON output is causing a problem for me. You can see how it looks like here:

The challenge I am encountering is correctly placing the "count_reqs" data in the corresponding columns on the table. For instance, the first row should be displayed as illustrated below:

http://snag.gy/tB0ji.jpg  <--- Sorry, I cannot provide more links at this time.

I need help finding a solution to address this issue. Here's the code snippet representing the current table implementation:

<table class='table'>
            <thead>
                <tr>
                    <th>Tower</th>
                    <th>Job Level</th>
                    <th ng-repeat='data in dataset.headers'>{{ data }}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat='tower in dataset.dataByTower' ng-init='current = 0'>
                    <td rowspan='{{ tower.entries.length }}'>{{ tower.tower_name }}</td>
                    <td>{{ tower.job_level }}</td>
                </tr>
            </tbody>
        </table>
javascriptangularjsjson

Answer №1

Give this a shot!

<table class='table'>
        <thead>
            <tr>
                <th>Castle</th>
                <th>Skill Level</th>
                <th ng-repeat='info in database.headings'>{{ info }}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat='castle in database.dataByCastle' ng-init='current = 0'>
                <td rowspan='{{ castle.entries.length }}'>{{ castle.castle_name }}</td>
                <td>{{ castle.skill_level }}</td>
                <td ng-repeat='data in dataset.headers'><span ng-if="data == castle.year_month">{{ castle.req_count }}</span></td>
            </tr>
        </tbody>
    </table>

Note: I have not tested this code as you did not provide a jsFiddle or the necessary data for variables database.headings and database.dataByCastle.

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

Using JavaScript, redirect to a specified URL once a valid password has been entered on an HTML form

Need help with JavaScript for password validation and URL redirection. I'm new to JS and used some resources like Password correct? then redirect & Adding an onclick function to go to url in javascript?. Here's my current code: ...

javascripthtmlforms

Encountering an internal/modules/cjs/loader.js:892 error when attempting to install the newest version of node.js on Windows 10

After recently updating my node.js to the latest version using chocolatey, I encountered a problem with my command prompt displaying the following error: internal/modules/cjs/loader.js:892 throw err; ^ Error: Cannot find module 'C:\Users&bso ...

javascriptnode.jsnpmvisual-studio-code

Does JavaScript automatically round large numbers?

I have a simple array: myArray = [{"egn":79090114464},{"egn":92122244001},{"egn":10005870397643185154},{"egn":10000330397652279629},{"egn":10000330397652279660},] However, when I append the values from thi ...

javascriptjquery

Retrieve the Content-Type header response from the XHR request

My intention is to check the header content type and see if it is text/html or text/xml. If it is text/html, then it indicates an error that I need to address before moving forward. ...

javascriptjqueryajaxcontent-typexmlhttprequest

Using JavaScript with Selenium, you can easily clear the input field and send

Here is a question input field. When clicked on, the h3 element with the name will disappear and the input tag will appear for entry of a new name. <td style="width:92%;"> <h3 id="question_tex ...

javascriptjavaselenium

Enhance your Next.js routing by appending to a slug/url using the <Link> component

In my Next.js project, I have organized my files in a folder-based structure like this: /dashboard/[appid]/users/[userid]/user_info.tsx When using href={"user_info"} with the built-in Next.js component on a user page, I expect the URL to dynamic ...

javascripttypescriptnext.js

Exploring a JSON object and dynamically populating FormData with values using jquery

I am working with a JSON object in jQuery that looks like this: userObj = { "loginId":"abc123", "class":"5", "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5e5457565311584b4c0e0606087f58525e5653115c5052">[e ...

jqueryjsonajax

What are some effective methods for selectively handling batches of 5-20k document inputs when adding them to a collection containing up to one million documents using MongoDB and Mongoose?

My MMO census and character stats tracking application receives input batches containing up to 5-20k documents per user, which need to be aggregated into the database. I have specific criteria to determine whether a document from the input already exists i ...

javascriptnode.jsmongodbmongoosebigdata

In Three.js, FBX bones exhibit smooth rotation, but GLTF bones display strange rotation behavior

Currently, I have successfully implemented a dynamic model that works with an FBX file using the Three.js FBXLoader. However, for convenience sake, I decided to switch to using a GLTF/GLB file as it contains textures within the same file. To achieve this, ...

javascriptnode.jsthree.jsgltffbx

Develop a client-side API utilizing various libraries

After completing the server side of an API that delivers HTML via JSON using REST through CodeIgniter, I am now exploring how to create a client-side API with JavaScript. The goal is to retrieve data from the server through the API, display it in the DOM, ...

javascriptjqueryapirestclient

Tips for utilizing the find function with nested documents in MongoDB in conjunction with Next.js?

I have structured my data in such a way that it is obtained from localhost:3000/api/notes/[noteTitle]/note2 { "data": [ { "_id": "62ff418fa4adfb3a957a2847", "title": "first-note2" ...

javascriptmongodbnext.js

classes_1.Individual is not a callable

I am facing some difficulties with imports and exports in my self-made TypeScript project. Within the "classes" folder, I have individual files for each class that export them. To simplify usage in code, I created an "index.ts" file that imports all class ...

javascriptnode.jstypescript

Having npm start is causing an error to be displayed

I am encountering an issue when I try to start 'npm' on my mean.js application. The error message is related to a missing file called '.csslintrc'. Below, I have included the terminal output as well as the snippet of code where the erro ...

javascriptnpmmeanjsnpm-start

What is the best way to utilize the features of component A within component B when they exist as separate entities

Component A has all the necessary functionalities, and I want to use it in Component B. The code for ComponentA.ts is extensive, but it's not written in a service. How can I utilize the logic from Component A without using a service, considering both ...

javascripthtmlangulartypescriptangular11

PHP Unleashed: Unraveling the Mysteries

What is the Best Way to Extract Data from This Array? I Need to display the First Object of My Array, Specifically the id field in the 3rd Row. <?php $con=mysqli_connect("localhost","root","","arrayy"); // Check connection if (mysqli_conne ...

phparraysjsonobject

What occurs if we trigger an emit event on a socket that is already disconnected?

If the socket is already disconnected, what are the potential consequences of executing the code below? socket.emit("event", event_data); ...

javascriptnode.jssocket.io

Mastering the Art of Scrolling

Can someone please tell me the name of this specific scrolling technique? I am interested in using something similar for my project. Check out this example site ...

javascriptjquerycsshtml

What is the method to retrieve content from a different domain using .load()?

When I try to retrieve data from a different domain using .load() or other jQuery ajax functions, it doesn't seem to work. However, accessing URLs on my own domain works perfectly fine. I've heard about a workaround involving PHP and setting up ...

javascriptjqueryajaxcross-domain

Address the instances of missing values within the JSON response

I'm grappling with understanding how Go treats json null values. Take this example: package main import ( "fmt" "encoding/json" "log" ) type Fruit struct { Name string Price int Owner string } func main() { json ...

jsongonull

Unable to utilize navigator.camera.getPicture in iOS while using PhoneGap Adobe Build

I've spent hours searching, trying to troubleshoot my PhoneGap app (compiled by Adobe PhoneGap Build) and I suspect there's something crucial about PhoneGap that I'm missing. I've added the following lines to the config.xml file: <f ...

javascripthtmlcordovaphonegap-build