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 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:

• javascript
• jquery
• json

• 2 What is result ? Can you show us ? May be JSON.stringify(result) – Rayon Commented Dec 17, 2015 at 8:51
• result is the HTML div on my UI. – Ankita Dhawale Commented Dec 17, 2015 at 8:53
• 1 Am asking about the result argument being passed in ajax success callback.... – Rayon Commented Dec 17, 2015 at 8:54
• 1 OP, you should change datatype to dataType in your AJAX call. – Andy Commented Dec 17, 2015 at 8:55
• try this in success callback $('#result').html(JSON.stringify(result)) – Shishir Morshed Commented Dec 17, 2015 at 8:55

2 Answers 2

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.

Updates:

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;   

You can use jQuery.parseJSON(), this method will transform json to javascript object and after it loop this object and append html to page. Will be better to send array of items instead of object with parameters from server.