Is it possible for a nested td value to trigger the creation of a new row

Question

Is it possible for a nested td value to trigger the creation of a new row

[ {

    "course": "Bachelor of Computer Science",
    "level": "Bachelor's Degree",
    "provider": [
        {
            "school": "Harvard University",
            "duration": "156"
        },
        {
            "school": "Yales University",
            "duration": "156"
        },
        {
            "school": "BYU-Provo",
            "duration": "208"
        }
       
    ]
}

]

I am retrieving information from an API and the format is similar to the above code snippet. I aim to display this data in a table, so I improvised with the following approach:

data.map((item) => {
     return `
   <tr class="grid-row">
   <td>${item.course}</td>
   <td>${item.level}</td>
    ${provider(item.provider)}  // Loops through the provider array 
</tr>

The current output of the table looks like:

Course	Level	Provider
Science	BSC.	Harvard University Yales University BYU-PROVO

I want to dynamically generate new rows for each individual provider under the same course and level. This way, the updated table would look like:

Course	Level	Provider
Science	BSC.	Harvard University
Science	BSC.	Yales University
Science	BSC.	BYU-Provo

javascript html css

Answer 1

Answer №1

Retrieve information from an API using the $.get() function and dynamically add rows to a table body using the append method. For instance; index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Course</th>
                <th>Level</th>
                <th>Provider</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>
    <script src="app.js"></script>
</body>
</html>

app.js:

function generateTableContent(data){
    const {course, level, provider} = data;
    const tableBody = $('tbody');
    for (let i; i<provider.length; i++){
        const school = provider[i].school;
        tableBody.append(`
            <tr>
                <th>${course}</th>
                <td>${level}</td>
                <td>${school}</td>
            </tr>
        `)
    }
}

$.get('<url>', generateTableContent);

Answer 2

Retrieve information from an API using the $.get() function and dynamically add rows to a table body using the append method. For instance; index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Course</th>
                <th>Level</th>
                <th>Provider</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>
    <script src="app.js"></script>
</body>
</html>

app.js:

function generateTableContent(data){
    const {course, level, provider} = data;
    const tableBody = $('tbody');
    for (let i; i<provider.length; i++){
        const school = provider[i].school;
        tableBody.append(`
            <tr>
                <th>${course}</th>
                <td>${level}</td>
                <td>${school}</td>
            </tr>
        `)
    }
}

$.get('<url>', generateTableContent);

Is it possible for a nested td value to trigger the creation of a new row

Answer №1

Similar questions

Is it possible to perform a PHP redirect after the headers have been

Display a caution when verifying a function's value instead of its return value

Escaping an equal sign in JavaScript when using PHP

Assign a value using the select component from Material UI

looping through the elements in a collection using a for-in loop

Creating an aesthetic website using HTML and CSS styling

Creating multiple thumbnails and storing them in various folders using CodeIgniter

Attempting to enter text into a text field using Selenium

What is the best way to insert an object at a particular position within an array containing numerous nested objects?

Omit a certain td element from the querySelectorAll results

How can one effectively manage a dynamic web element ID and xpath as they evolve?

Exploring Molecular Structures with ThreeJS - Understanding the Mechanics of Double Bonds

Mandate that users select from the available place autocomplete suggestions exclusively

The Firestore query for viewing resources is currently not functioning as expected due to issues with

What could be causing my Array Push not to function correctly in Vue?

Choose the current parent item using Angular's ng-selected and $index

utilize multiple submit buttons within a single form

JavaScript: Zooming functions correctly as expected

Navigating Through Grid and Card Content in React

State variables in React hooks like useState always return the previous value before