Displaying JSON Data using jQuery

Question

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:

enter image description here

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:

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

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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;

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 17, 2015 at 8:58

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ankita Dhawale Over a year ago

@Jai Summarystats is present, its just not visible in screenshot. Sorry.

Jai Over a year ago

@AnkitaDhawale just seen the other screenshot there is stats which is an array so you have to loop in it to get the value you are looking for.

ufrutov · Accepted Answer · 2015-12-17 09:06:17Z

-1

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.

answered Dec 17, 2015 at 9:06

ufrutov

691 silver badge3 bronze badges

Collectives™ on Stack Overflow

Displaying JSON Data using jQuery

2 Answers 2

Updates:

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Updates:

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related