@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angularestask';
}
<div>
<table id=«table»>
<colgroup>
<col class=«name» />
<col class=«account» />
</colgroup>
<tr>
<th onclick=«sortTable(0)»><span class=«glyphicon glyphicon-sort»></span>NAME</th>
<th onclick=«sortTable(1)»><span class=«glyphicon glyphicon-sort»></span>ACCOUNT</th>
</tr>
</table>
</div>
<script>
document.addEventListener( «DOMContentLoaded», get_json_data, false ); // get_json_data is the function name that will fire on page load
function get_json_data(){
var json_url = 'data.json';
print(json_url.toString());
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {//when a good response is given do this
var data = JSON.parse(this.responseText); // convert the response to a json object
append_json(data);// pass the json object to the append_json function
}
}
//set the request destination and type
xmlhttp.open(«POST», json_url, true);
//set required headers for the request
xmlhttp.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»);
// send the request
xmlhttp.send(); // when the request completes it will execute the code in onreadystatechange section
}