Loading JSON File in html

Question

Hey guys I've been having a problem loading json file. Like nothing happens when I click the button which should load it up. New to HTML so any help would be very appreciated. This is just the function not the whole file!

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'hello')}">
<body style="background-color:green;">
  <div class="container">
    <h1 style="font-family:verdana;"><center>ANAME</center></h1>
    <input type='text' value='Input directory' id = 'input' style='width:200px;margin:0 50%;position:relative;left:-100px;'><br></br>
    <input type='submit' value='Get Data!' id='demo' onClick='myFunction()' style='height:50px;width:100px;margin:0 50%;position:relative;left:-50px;'>


    <script>
    function myFunction() {
        //---my custom validation---
        var inputField = document.getElementById("input");
        if (inputField.value == "" || inputField.value == "Input directory") {
            return;
        }

        //---Loading JSON---
        $.ajax({
            url: "test.json",
            dataType: "json",
            data: {},
            success: function(data){
                //---Do whatever with the loaded 'data' variable;
                alert('go');
            },
            error:function(error){
                alert('Invalid');
            }
        });             
    }
    </script>
  </div>
</body>

</html>

ali zarei · Accepted Answer · 2018-02-04 08:29:05Z

1

function myFunction() {
        
        var inputField = document.getElementById("input");
        var fr = null;
        if (input.files && input.files[0]) {
            fr = new FileReader();
            fr.onload = function() {
                alert(fr.result);
            };
            fr.readAsText(inputField.files[0]);
        }else
          alert("plz select a file");
        
    }

<input type="file" id="input"/>
<input type="button" onclick="myFunction()" value="test" />

you can use this

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

getJSON is most implementations will specify a success handler

$.getJSON( "test.json", function( data ) {
  alert("success");
});

more information http://api.jquery.com/jquery.getjson/#jQuery-getJSON-url-data-success

EDIT

for loading json file from input element you can use this

    function myFunction() {
 if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
                alert('The File APIs are not fully supported in this browser.');
                return;
            }   
            var inputField = document.getElementById("input");
            var fr = null;
            if (input.files && input.files[0]) {
                fr = new FileReader();
                fr.onload = function() {
                    alert(fr.result);
                };
                fr.readAsText(inputField.files[0]);
            }
        }

edited Feb 4, 2018 at 8:29

answered Feb 4, 2018 at 4:57

ali zarei

1,25111 silver badges18 bronze badges

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

2 Comments

John Doe Over a year ago

Thanks for the help. Unfortunately still nothing is happening and I really don't understand.

John Doe Over a year ago

I updated the code it still seems to do nothing rlly wierd.

Phil · Accepted Answer · 2018-02-04 06:34:52Z

The markup you posted does not have a link to the jQuery library you can insert this code above the tag to include it, jQuery uses the '$' character to make more responsive & simpler JavaScript. Code above the tag:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

To fetch json data from an external source you can use the XMLHTTTPREQUEST object to send a HTTP request to the server or other server from the client. A common example of this object is below:

var req = new XMLHttpRequest(); 
req.responseType = 'json'; 
req.open('GET', url, true); 
req.onload = function() { 
   var jsonResponse = req.response; 
   // do something with jsonResponse 
}; 
req.send(null);

Reza Mamun · Accepted Answer · 2018-02-04 07:21:54Z

0

You can try with the following:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'hello')}">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="background-color:green;">
<div class="container">
    <h1 style="font-family:verdana;"><center>ANAME</center></h1>
    <input type='text' value='Input directory' id = 'input' style='width:200px;margin:0 50%;position:relative;left:-100px;'><br></br>
    <input type='submit' value='Get Data!' id='demo' onClick='return myFunction();' style='height:50px;width:100px;margin:0 50%;position:relative;left:-50px;'>

<script>
function myFunction() {
    //---my custom validation---
    var inputField = document.getElementById("input");
    if (inputField.value == "" || inputField.value == "Input directory") {
        return false;
    }

    //---Loading JSON---
    $.ajax({
        url: "test.json",
        dataType: "json",
        data: {},
        success: function(data){
            //---Do whatever with the loaded 'data' variable;
            alert('go');
        },
        error:function(error){
            alert('Invalid');
        }
    });
    return false;
}
</script>

</div>
</body>
</html>

edited Feb 4, 2018 at 7:21

answered Feb 4, 2018 at 5:31

Reza Mamun

6,2531 gold badge46 silver badges44 bronze badges

1 Comment

Reza Mamun Over a year ago

I see you edited your question @JohnDoe . You need to edit the <HEAD> tag as you are missing to include jQuery library :)

Collectives™ on Stack Overflow

Loading JSON File in html

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related