MaxInterview - how draw table from json ajax

showing results for - "how draw table from json ajax"

09 Nov 2018

1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="utf-8">
5<title>WCF Client</title>
6
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
8
9</head>
10
11<body>
12
13<table id="location" border='1'>
14    <tr>
15        <th>Countries</th>
16         <th>Cities</th>
17    </tr>
18</table>
19
20<script>
21
22var service = 'http://localhost/DistributedDataSystem/Service.svc/';
23
24$(document).ready(function(){
25
26    jQuery.support.cors = true;
27
28    $.ajax(
29    {
30        type: "GET",
31        url: service + '/GetAllCountries/',
32        data: "{}",
33        contentType: "application/json; charset=utf-8",
34        dataType: "json",
35        cache: false,
36        success: function (data) {
37
38        var trHTML = '';
39
40        $.each(data.Countries, function (i, item) {
41
42            trHTML += '<tr><td>' + data.Countries[i] + '</td><td>' + data.Cities[i] + '</td></tr>';
43        });
44
45        $('#location').append(trHTML);
46
47        },
48
49        error: function (msg) {
50
51            alert(msg.responseText);
52        }
53    });
54})
55
56</script>
57
58</body>
59</html>
60

source

Marlene

23 Nov 2016

1let xhr = new XMLHttpRequest;
2xhr.open('GET', 'your-url', true);
3xhr.onload = function() 
4{
5  if (this.status === 200) 
6  {
7  	let data = JSON.parse(this.responseText).Table,
8    		tbodyHtml = '';
9    
10    data.map(function(d) {
11    	tbodyHtml =+ `
12      	<tr>
13        	<td>${d.ParentCategoryId}</td>
14        	<td>${d.ParentCategoryName}</td>
15        	<td>${d.IsActive}</td>
16        </tr>
17      `;
18    });
19    
20    document.querySelector('#dataTable tbody').innerHTML = tbodyHtml;
21  }
22}
23xhr.send();
24

source

similar questions

jquery json to table json table example datatable ajax complete how to get data from database using jquery ajax in asp net jquery ajax json send data in datatable ajax get json data in ajax call load data from json server into html using jquery how to pass json format data on ajax call how to convert json to javascript object in ajax success jquery datatable draw false display json data in html table using javascript dynamically how to get data from db using ajax how to set json type jquery ajax json data from server into html table jquery datatable ajax get data

queries leading to this page

how to create table for ajax call json data table ajax json jquery datatables ajax json example php display json data from form in html table using jquery ajax datatables ajax json how to display json data in html table using ajax bind json data in html table using jquery ajax jquery ajax json to table display json data in html table using jquery ajax data table in ajax ajax json to table ajax response data show in table ajax json data to html table json table using ajax jquery method resort ajax from api into table javascript ajax table json example json and ajax to make a table json table using ajax jquery method make a table using ajax and jason load json file to table ajax ajax display json data in table asp table from json ajax how draw table from json ajax ajax json response to html table json html javascript ajax table how draw table from json ajax