CODEWITHSUNDEEP
javascriptjqueryjson
jenna
jenna

Reputation: 87

Retrieving data from json File

I have a JSON file called person.json. JSON file is in the data folder.

This is the JSON data:

 {
   "name": "Goa Wei",
   "age": 31,
   "phone": "202-555-0104",
   "group": 3
 }

I have the html code to display information in a div class called containerDatadump when clicking on <input id="get" type="submit" value="Get"></input>. I have written the following Javascript code.

var container = $("div.containerDatadump");
$(document).ready(function () {
    $("input#get").click(function () {
        $.ajax({
            type: "GET",
            url: "data/person.json",
            dataType: "json",

            success: function (data) {
                $.each(data, function (index, item) {
                    $.each(item, function (key, value) {
                        container.append(key + " :" + value + "</br>");

                    });
                    container.append("<br/></br>");
                });
            }
        });
    });

});

I have done this. I try my best to debug the problem but couldn't succeed.

Can anyone help me figure out what is wrong with my code? It would really help me.

Upvotes: 1

Views: 95

Answers (2)

Kimberley
Kimberley

Reputation: 459

My answer looks like that of forgo but i think you can improve you code a little bit by using $.getJSON instead of a regular ajax call.

$.getJSON is a shorthand ajax call for (more info):

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

I also used JSON Generator for the data (LINK) to prevent browser issues.

Your code is a much cleaner this way (in my opinion).

$(document).ready(function () {
  var container = $(".containerDatadump");
  $("#get").click(function () {
    $.getJSON("https://www.json-generator.com/api/json/get/ceoSrTPote?indent=2", function(data){
      $.each( data, function( key, val ) {
        container.append(key + " :" + val + "</br>");
      });
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containerDatadump"></div>
<input id="get" type="submit" value="Get"></input>

Upvotes: 1

forgo
forgo

Reputation: 952

I think the biggest problem is that you defined your container outside of your $(document).ready function. This means that your markup doesn't exist yet to properly get a handle on your containerDatadump class.

I made a temporary JSON file hosted on a remote server using this JSON Generator tool to test. Otherwise, I run into CORS issues in my browser.

{
  "phone": "202-555-0104", 
  "age": 31, 
  "group": 3, 
  "name": "Goa Wei"
}

With this data, I have modified your function to simplify the loop in your ajax success handler, and I have placed the container variable assignment inside the ready function so that it works properly:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var container = $("div.containerDatadump");
            $("input#get").click(function() {
                $.ajax({
                    type: "GET",
                    url: "http://www.json-generator.com/api/json/get/bOxnwzyhIO?indent=2",
                    dataType: "json",
                    success: function(data) {
                        for (var key in data) {
                            if (data.hasOwnProperty(key)) {
                                console.log(key + " -> " + data[key]);
                                container.append("<div>" + key + " :" + data[key] + "</div><br/>");
                            }
                        }
                    }
                });
            });

        });
    </script>
</head>
<body>
    <input id="get" type="submit" value="Get"></input>
    <div class="containerDatadump" />
</body>
</html>

Upvotes: 0

Related Questions