Generate interactive HTML content and showcase JSON data within it

Question

Generate interactive HTML content and showcase JSON data within it

I am working on an AJAX API call that returns JSON format data. My goal is to display each value on the screen using HTML elements. Although I have achieved this, the design is not dynamic as needed. Additionally, I want to show a message ("No data available") if there is no data in the response. Below is a sample of my working HTML and JSON. To be displayed as shown below:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPPIYcw34/T38+jNPFUbAKIQFrVMFEb/c/RdPDFSPLb4Jm" crossorigin="anonymous"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
    <div class="portlet light bg-inverse tripcontainer">
        <div id="container">
            <!-- Driver Details Section -->
            <div class="col-md-4 driver">
                <div>
                    <label class="header">Driver Details</label>
                </div>
                <div>
                    <label>Name:</label>
                    <span class="dname"></span>
                </div>
                ... [additional lines representing dynamic HTML elements]
             </div>
        </div>
    </div>
</div>

jquery html css json ajax

Answer 1

Answer №1

It seems like you're looking to populate all the information provided, here is a way to achieve this using JavaScript:

var parsedData = JSON.parse(ajaxResponse);
if(parsedData.length == 0){
   console.log('No data available');
}else{
   var keys = Object.keys(parsedData[0]);
   
   for(var i = 0; i < keys.length ; i++){
      // Update elements with corresponding classes in HTML
      $("."+keys[i]).html(parsedData[0][keys[i]]);
   }
}

Your updated HTML structure should look like this:

<div>
   <label>Email:</label>
   <span class="email"></span>
</div>

Answer 2

It seems like you're looking to populate all the information provided, here is a way to achieve this using JavaScript:

var parsedData = JSON.parse(ajaxResponse);
if(parsedData.length == 0){
   console.log('No data available');
}else{
   var keys = Object.keys(parsedData[0]);
   
   for(var i = 0; i < keys.length ; i++){
      // Update elements with corresponding classes in HTML
      $("."+keys[i]).html(parsedData[0][keys[i]]);
   }
}

Your updated HTML structure should look like this:

<div>
   <label>Email:</label>
   <span class="email"></span>
</div>

Answer 3

Answer №2

When it comes to populating JSON data in HTML, there are various methods that can be used such as Ajax, getJSON, Fetch, JavaScript (pure), and XMLHttpRequest.

Below is an example showcasing the fetch() method. Feel free to customize it based on your specific requirements:

<div>
    <table>
        <tbody id="my-list">
            <tr>
                <th>Field 01</th>
                <th>Field 02</th>
                <th>Field 03</th>
                <th>Field 04</th>
                <th>Field 05</th>
            </tr>
        </tbody>
    </table>
</div>


<script>

$(function () {
    const url = 'https://jsonplaceholder.typicode.com/todos';
    fetch(url, { /* other parameters */ })
        .then(resp => resp.json())
        .then(data => { // Your code for handling the data you get from the API
            renderData(data);
        })
        .catch(function (error) { // This is where you run code if the server returns any errors
            console.log('There has been a problem with your fetch operation: ', error.message);
        });
});


function renderList(data) {
    var list = "";
    $.each(data, function (index) {
        href = "https://jsonplaceholder.typicode.com/todos?id=" + data[index].Id;
        list += "<tr>";
        list += "<td>" + data[index].Field01 + "</td>";
        list += "<td>" + data[index].Field02 + "</td>";
        list += "<td>" + data[index].Field03 + "</td>";
        list += "<td>" + data[index].Field04 + "</td>";
        list += "<td>" + data[index].Field05 + "</td>";
        list += "</tr>";
    })
    $("#my-list").append(list);
}

</script>

Hopefully, this information proves useful...

Answer 4

When it comes to populating JSON data in HTML, there are various methods that can be used such as Ajax, getJSON, Fetch, JavaScript (pure), and XMLHttpRequest.

Below is an example showcasing the fetch() method. Feel free to customize it based on your specific requirements:

<div>
    <table>
        <tbody id="my-list">
            <tr>
                <th>Field 01</th>
                <th>Field 02</th>
                <th>Field 03</th>
                <th>Field 04</th>
                <th>Field 05</th>
            </tr>
        </tbody>
    </table>
</div>


<script>

$(function () {
    const url = 'https://jsonplaceholder.typicode.com/todos';
    fetch(url, { /* other parameters */ })
        .then(resp => resp.json())
        .then(data => { // Your code for handling the data you get from the API
            renderData(data);
        })
        .catch(function (error) { // This is where you run code if the server returns any errors
            console.log('There has been a problem with your fetch operation: ', error.message);
        });
});


function renderList(data) {
    var list = "";
    $.each(data, function (index) {
        href = "https://jsonplaceholder.typicode.com/todos?id=" + data[index].Id;
        list += "<tr>";
        list += "<td>" + data[index].Field01 + "</td>";
        list += "<td>" + data[index].Field02 + "</td>";
        list += "<td>" + data[index].Field03 + "</td>";
        list += "<td>" + data[index].Field04 + "</td>";
        list += "<td>" + data[index].Field05 + "</td>";
        list += "</tr>";
    })
    $("#my-list").append(list);
}

</script>

Hopefully, this information proves useful...

Answer 5

Answer №3

If you want to make this dynamic, here are the steps you can follow:

1. Set values for the driver like so:

$('.dname').html(driver_data[0].employeename);

2. Set values for the passenger like this:

$('.pname').html(driver_data[0].passenger_data[0].employeename);

3. Iterate through your results (This step should come first):

for (i = 0; i < result.length; i++) { 
// assign values here
}

In this example, I have parsed and added values.

Here is how it looks after the updates:

[![view image][2]][2]

Note :

I have included some fields for both the driver and passenger, which you can customize as needed by iterating through them.
Avoid creating static HTML, instead use jQuery to add elements dynamically, resulting in a cleaner code.

Update :

To address the OP's query about iterating through the result and adjusting the data, check out the updated fiddle that offers a dynamic iteration solution.

Here's how it appears:

[![Output][4]][4]

$(document).ready(function() {
    $.get("http://www.mocky.io/v2/5ba349e82f000054009685b0", function(data, status) {
        var output = '';
        for (i = 0; i < data.length; i++) {
            var driverHtml = '<div class="col-md-4 driver"><div><label class="header">Driver Details</label></div><div><label>Name:</label><span class="dname">' + data[i].employeename + '</span></div>';
            var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header">Passenger Details</label></div><div><label>Name:</label><span class="pname">' + data[i].passenger_data[0].employeename + '</span></div><hr>';
            output += driverHtml + passengerHtml;
        }
        $('#container').html(output);
    });
});

Note for update :

I utilized Mocky for dummy Data to mimic the real-time output shown here.

The HTML is also constructed dynamically with only a few fields filled out. Feel free to populate the rest of the fields as necessary.

Hopefully, this guide proves helpful to you.

Answer 6

If you want to make this dynamic, here are the steps you can follow:

1. Set values for the driver like so:

$('.dname').html(driver_data[0].employeename);

2. Set values for the passenger like this:

$('.pname').html(driver_data[0].passenger_data[0].employeename);

3. Iterate through your results (This step should come first):

for (i = 0; i < result.length; i++) { 
// assign values here
}

In this example, I have parsed and added values.

Here is how it looks after the updates:

[![view image][2]][2]

Note :

I have included some fields for both the driver and passenger, which you can customize as needed by iterating through them.
Avoid creating static HTML, instead use jQuery to add elements dynamically, resulting in a cleaner code.

Update :

To address the OP's query about iterating through the result and adjusting the data, check out the updated fiddle that offers a dynamic iteration solution.

Here's how it appears:

[![Output][4]][4]

$(document).ready(function() {
    $.get("http://www.mocky.io/v2/5ba349e82f000054009685b0", function(data, status) {
        var output = '';
        for (i = 0; i < data.length; i++) {
            var driverHtml = '<div class="col-md-4 driver"><div><label class="header">Driver Details</label></div><div><label>Name:</label><span class="dname">' + data[i].employeename + '</span></div>';
            var passengerHtml = '<div class="col-md-8 passenger"><div><label class="header">Passenger Details</label></div><div><label>Name:</label><span class="pname">' + data[i].passenger_data[0].employeename + '</span></div><hr>';
            output += driverHtml + passengerHtml;
        }
        $('#container').html(output);
    });
});

Note for update :

I utilized Mocky for dummy Data to mimic the real-time output shown here.

The HTML is also constructed dynamically with only a few fields filled out. Feel free to populate the rest of the fields as necessary.

Hopefully, this guide proves helpful to you.

Generate interactive HTML content and showcase JSON data within it

Answer №1

Answer №2

Answer №3

Similar questions

Extract information from a string to retrieve the array specifications

Background in CSS ::after pseudo-element not showing up

Unable to scroll within ion-view component

Expand and Collapse Button for Customizing Table Height Individually

Merge two distinct JSON objects obtained through an API request using Javascript

jQuery append allows for the addition of multiple items simultaneously

Skipping code in JavaScript/jQuery function on window load

Using AJAX and jQuery, the result is retrieved and inserted into a <div> element

Tips for increasing the number of inputs within a form using <script> elements

Using Angular/Typescript to interact with HTML5 Input type Date on Firefox (FF)

When the label is clicked, retrieve the value of the checkbox within

my AJAX code isn't redirecting me to the desired URL in the background

Unresponsive Button_tag within a Rails table

Searching for an element with a changing name using jQuery - Struggling with quotes

Display JSON data retrieved from PHP script on Windows Phone 8.1 platform

What causes discrepancies between jQuery set attributes and .html() output?

Achieving the resolution of a Promise amidst the failure of a separate promise

Retrieve all information from a JSON array

Error message 'Object doesn't have support for this property or method' is triggered by a basic JSON object

What is the best approach to decode this JSON object in Swift 3.0?