Create Dynamic Html & Display Json Values In It

I have call ajax api call, i get response in json format. I want to display each values on screen with html elements. I've achieve this but it wont create dynamic design as i neede

Solution 1:

If I understood well you want to fill each information So to parse with javascript you can do :

var parsedResponse = JSON.parse(ajaxesponse);
if(parsedResponse.length = 0){
   console.log('No data');
}else{
   var keys = Object.keys(parsedResponse[0]);
   //parsedResponse[0] for driver datafor(var i = 0; i < keys.length ; i++){
      //The best thing to do is to change your class name and name it the same way as your keys in the response object
      $("."+keys[i]).html(parsedResponse[0][keys[i]]);
   }
}

And your html : instead of

<div><label>Email:</label><spanclass="demail"></span></div>

You have something like that

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

Solution 2:

There are several ways in order to populate JSON data in HTML i.e. Ajax, getJSON, Fetch, JavaScript (pure), XMLHttpRequest.

Here is an example using fetch() method below. You can modify it according to your own needs:

<div><table><tbodyid="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 APIrenderData(data);
        })
        .catch(function (error) { // This is where you run code if the server returns any errorsconsole.log('There has been a problem with your fetch operation: ', error.message);
        });
});


functionrenderList(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>

Hope this helps...

Solution 3:

To make this dynamic you can follow these steps

1. Assign values for driver like this

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

2. Assign values for passenger like this

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

3. Iterate through your result (This should be first)

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

Here i have parsed and appended values in this fiddle

This is how it looks like after appending

[![enter image description here][2]][2]

Note :

1. I have appended few fields for driver and passenger you should iterate through it and make it fit for your wish.

2. You don't need to create static HTML, instead you can do this from jquery itself. So that you can have less code.

Update :

As the OP wants how to iterate through the result and fix the data in it.

Here is the updated fiddle which iterates dynamically

This is how it looks like

[![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 = '<divclass="col-md-4 driver"><div><labelclass="header">Driver Details</label></div><div><label>Name:</label><spanclass="dname">' + data[i].employeename + '</span></div>';
            var passengerHtml = '<divclass="col-md-8 passenger"><div><labelclass="header">Passenger Details</label></div><div><label>Name:</label><spanclass="pname">' + data[i].passenger_data[0].employeename + '</span></div><hr>';
            output += driverHtml + passengerHtml;
        }
        $('#container').html(output);
    });
});

Note for update :

I have used Mocky for the Data to simulate the real time output like this

I have created HTML also dynamically and filled only few fields. You can fill the remaining fields too.

Hope this helps you.