Arrange JSON information in an HTML table with distinct header rows for every data category

Question

Arrange JSON information in an HTML table with distinct header rows for every data category

I have a JSON object with a key:value pair named callRoot. Some examples of values for this pair are @S, @C, and @W. There are multiple objects that share the same value and I want to create an HTML table head row at the beginning of each group and repeat it for each data set.

Latest Update

Here's a Fetch API function for accessing remote API data:

const fetchData = function() {
  const apiKey = "";
  const request = `https://apiurl.com`;

  fetch(request)
    .then(response => response.json())
    .then((data) => foo(data))
    .catch(error => {
      console.log(error);
    });
  }
fetchData();

New Update

for (let i of filtered[property]) {
  const tr = document.createElement('tr');
  tblBody.appendChild(tr);
  data.forEach(element => {
    console.log(element);
  });

Sample JSON data provided below:

const data = [
  {
    "symbol": {
      "description": "SOYBEANS January 2022"
    },
  // more data...

];

Code snippet:

// Create empty arrays for each callRoot grouping

// further implementation is similar to above code block...

Example structure of the HTML table:

<table>
  <tbody>
    <tr>
      <th colspan="9">SOYBEANS</th>
    </tr>
    // more table rows...
  </tbody>
  // repeated structure for other groups...
</table>

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

javascript arrays json for-loop fetch-api

Answer 1

Answer №1

I created a function that generates a table based on the example provided.

Below is the script/function I used:

OLD Function with Incorrect Data but Correct Output

const filterData = function (data) {
    const filtered = {};
    
    data.forEach(element => {
        if (filtered[element.callRoot]) 
            filtered[element.callRoot].push(element);
        else 
            filtered[element.callRoot] = [element];
    })
    
    return filtered;
};

// More code goes here...

FALSE OLD Data Used:

const commodities = [
    // Data here...
];

Output Using RIGHT Example Data:

<div>
    <table>
        // Table content generated from the correct example data
    </table>
</div>

New Solution Approach:

New Version of the Script Provided Below:

const filterData2 = function (data) {
    // New filtering logic for different structured data
};

// More updated script here...

Data for the New Example:

const data = [
    // New example data to be used in the updated script
];

Output with the Updated Example Data:

<div>
    <table>
        // Table content generated using the new example data source
    </table>
</div>

Answer 2

I created a function that generates a table based on the example provided.

Below is the script/function I used:

OLD Function with Incorrect Data but Correct Output

const filterData = function (data) {
    const filtered = {};
    
    data.forEach(element => {
        if (filtered[element.callRoot]) 
            filtered[element.callRoot].push(element);
        else 
            filtered[element.callRoot] = [element];
    })
    
    return filtered;
};

// More code goes here...

FALSE OLD Data Used:

const commodities = [
    // Data here...
];

Output Using RIGHT Example Data:

<div>
    <table>
        // Table content generated from the correct example data
    </table>
</div>

New Solution Approach:

New Version of the Script Provided Below:

const filterData2 = function (data) {
    // New filtering logic for different structured data
};

// More updated script here...

Data for the New Example:

const data = [
    // New example data to be used in the updated script
];

Output with the Updated Example Data:

<div>
    <table>
        // Table content generated using the new example data source
    </table>
</div>

Arrange JSON information in an HTML table with distinct header rows for every data category

Answer №1

Similar questions

What is the best way to fetch images from a JSON object in a React application?

Using Node.js to seamlessly read and upload files with Dropbox API

Error with JSON parsing caused by commas in JSON file using JsonSlurper

Engage in a conversation with a specific individual on the internet using node.js

Angular: Array in the template re-renders even if its length remains unchanged

Applying binary information to an image

What is the best way to declare a variable within a VueJS v-if condition without it being visible?

"What is the process for developing a Web-component with Vue and typescript that can be used in

In Typescript, if at least one element in an array is not empty, the function should return false without utilizing iterators

Issue with vue-apollo package causing GraphQL query not to display on the frontend

Limit the rotation of jQuery and CSS3 elements to always turn in a clockwise direction

What is the reason behind TypeScript indicating that `'string' cannot be assigned to the type 'RequestMode'`?

Aligning the stars with CSS

Modify the state of an individual item within an array

Why is my website returning a 404 error while attempting to retrieve a JSONObject?

The show-word-limit feature is malfunctioning on the element.eleme.io platform

What is the best way to convert a graphql query into a JSON object?

How to Send and Receive Data in One Request Using Android Studio and Web API

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

Retrieving a specific attribute pair from a JSON object