Can't get JSON with JQuery

I'm trying get json from url but it not working, also i'm not getting any error

index.js:

$(function () {
    $.getJSON("http://telegram-socks.tk/json", function (data) {
            $("textarea").html(JSON.stringify(data));
        }
    );
});

index.html:

<html>
<head>
    <meta name="viewport" content="initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col">
                <textarea class="form-control text-center" rows="50"></textarea>
            </div>
        </div>
    </div>
</body>
</html>

telegram-socks.tk/json:

{
    "Proxies": [
        "188.166.91.133:1080", 
        "51.15.100.63:1080", 
        ...
    ]
}

(telegram-socks.tk/json is valid JSON according to jsonlint.com)

Solution

If you open your console you will probabily see an error like this:

Mixed Content: The page at 'https://yourpage.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://telegram-socks.tk/json'. This request has been blocked; the content must be served over HTTPS.

That happens because you are on a page that is cryptography by SSL, and are trying to access a unsecure url, that most browser will natively block.

Or even like this:

Failed to load http://telegram-socks.tk/json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

That is the browser again blocking your request because of insecure resource in other pages

See the bellow snippet and check the console:

$(function() {
  $.getJSON("http://telegram-socks.tk/json", function(data) {
    console.log(data);
  }).error(function(e) {
    console.log(e);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row text-center">
    <div class="col">
      <textarea class="form-control text-center" rows="50"></textarea>
    </div>
  </div>
</div>

You can check more information about it in here and here