I am trying to display my JSON data in my HTML UI, The JSON Object is returning but I am not able to display the object.
And here is my JSON object structure:
Here is my JS File:
$(document).ready(function() {
console.log("ready!");
// on form submission ...
$('form').on('submit', function() {
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
valueTwo = $('input[name="hostname"]').val();
valueThree = $('input[name="iteration"]').val();
console.log(valueOne)
console.log(valueTwo)
console.log(valueThree)
$.ajax({
type: "POST",
url: "/",
datatype:'json',
data : { 'first': valueOne,'second': valueTwo,'third': valueThree},
success: function(result) {
$('#result').html(result.sectoutput.summarystats.Avg.Exempt)
},
error: function(error) {
console.log(error)
}
});
});
});
I get nothing in my result div.
EDIT:
Here is my json.stringify(result) output on my UI:
i feel you should stop the form submit:
$('form').on('submit', function(e) { // <-----add arg to get the event as e.
e.preventDefault(); //<----add this to stop the form submission
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
valueTwo = $('input[name="hostname"]').val();
valueThree = $('input[name="iteration"]').val();
console.log(valueOne)
console.log(valueTwo)
console.log(valueThree)
$.ajax({
type: "POST",
url: "/",
datatype: 'json',
data: {
'first': valueOne,
'second': valueTwo,
'third': valueThree
},
success: function(data) { //<----this confused so change it to "data"
var res = data.result.sectoutput.summarystats.Avg.Exempt;
var p = '<p><pre>'+res+'</pre></p>';
$('#result').append(p); // now append the Exempts here.
},
error: function(error) {
console.log(error)
}
});
});
Because if you don't then form will submit and page gets refreshed and the data from ajax won't be reflected.
I guess the actual problem lies here:
success: function(data) { //<----this confused so change it to "data"
var res = data.result.sectoutput.summarystats.Avg.Exempt;
var p = '<p><pre>'+res+'</pre></p>';
$('#result').append(p); // now append the Exempts here.
},
The most confusing part in the code was the usage of result
key. Better to have a different name in the success callback as i used data
which is denoting the response data from ajax which is an object. So we just need to target it like:
var res = data.result.sectoutput.summarystats.Avg.Exempt;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With