Take data from a json file by the url (javascript)

Asked

Viewed 2,605 times

3

I wonder if it is possible to take the data of this json (http://destiny.trade/JSON/sortieRewards_f.json) without lowering it. Currently I can get the data from it, but I would like to go through the url (when there is some update in json, get the data automatically) My code goes like this: index page:

<!DOCTYPE HTML>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script language="JavaScript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script language="JavaScript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
        <script language="JavaScript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
        <script language="JavaScript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js" type="text/javascript"></script>
        <script language="JavaScript" src="dados.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Raridade</th>
                                <th>Drop Chance</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

data page.js:

var data = [
    {
        "name": "Rifle Riven Mod", 
        "rarity": {
            "name": "Rare", 
            "value": "6.79%"
        }
    }, 
    {
        "name": "Ayatan Anasa Sculpture", 
        "rarity": {
            "name": "Uncommon", 
            "value": "28.00%"
        }
    }, 
    {
        "name": "4000 Endo", 
        "rarity": {
            "name": "Uncommon", 
            "value": "12.10%"
        }
    }, 
    {
        "name": "Madurai Lens", 
        "rarity": {
            "name": "Rare", 
            "value": "2.33%"
        }
    }, 
    {
        "name": "Greater Madurai Lens", 
        "rarity": {
            "name": "Legendary", 
            "value": "0.67%"
        }
    }, 
    {
        "name": "Forma", 
        "rarity": {
            "name": "Rare", 
            "value": "2.50%"
        }
    }, 
    {
        "name": "Exilus Adapter", 
        "rarity": {
            "name": "Rare", 
            "value": "2.50%"
        }
    }, 
    {
        "name": "Orokin Reactor Blueprint", 
        "rarity": {
            "name": "Rare", 
            "value": "2.50%"
        }
    }, 
    {
        "name": "Orokin Catalyst Blueprint", 
        "rarity": {
            "name": "Rare", 
            "value": "2.50%"
        }
    }, 
    {
        "name": "Legendary Core", 
        "rarity": {
            "name": "Legendary", 
            "value": "0.18%"
        }
    }, 
    {
        "name": "Vazarin Lens", 
        "rarity": {
            "name": "Rare", 
            "value": "2.33%"
        }
    }, 
    {
        "name": "Zenurik Lens", 
        "rarity": {
            "name": "Rare", 
            "value": "2.33%"
        }
    }, 
    {
        "name": "Naramon Lens", 
        "rarity": {
            "name": "Rare", 
            "value": "2.33%"
        }
    }, 
    {
        "name": "Unairu Lens", 
        "rarity": {
            "name": "Rare", 
            "value": "2.33%"
        }
    }, 
    {
        "name": "Greater Vazarin Lens", 
        "rarity": {
            "name": "Legendary", 
            "value": "0.67%"
        }
    }, 
    {
        "name": "Greater Zenurik Lens", 
        "rarity": {
            "name": "Legendary", 
            "value": "0.67%"
        }
    }, 
    {
        "name": "Greater Naramon Lens", 
        "rarity": {
            "name": "Legendary", 
            "value": "0.67%"
        }
    }, 
    {
        "name": "Greater Unairu Lens", 
        "rarity": {
            "name": "Legendary", 
            "value": "0.67%"
        }
    }, 
    {
        "name": "Credit Booster", 
        "rarity": {
            "name": "Rare", 
            "value": "3.27%"
        }
    }, 
    {
        "name": "Affinity Booster", 
        "rarity": {
            "name": "Rare", 
            "value": "3.27%"
        }
    }, 
    {
        "name": "Resource Drop Chance Booster", 
        "rarity": {
            "name": "Rare", 
            "value": "3.27%"
        }
    }, 
    {
        "name": "Pistol Riven Mod", 
        "rarity": {
            "name": "Rare", 
            "value": "7.61%"
        }
    }, 
    {
        "name": "Shotgun Riven Mod", 
        "rarity": {
            "name": "Ultra Rare", 
            "value": "1.36%"
        }
    }, 
    {
        "name": "Melee Riven Mod", 
        "rarity": {
            "name": "Rare", 
            "value": "9.14%"
        }
    }
];

    $(document).ready(function () {
        $('#example').DataTable({
            "processing": true,
            "info": true,
            "stateSave": true,
            data: data,
            "columns": [
                { "data": "name" },
                { "data": "rarity.name"},
                { "data": "rarity.value"}
            ]
        });
    });
javascript json

1 answer

1

Like you already do jQuery you can use a function that is jQuery.getJson()

Example:

$.getJSON(url, function(result){
  // result é o json obtido
});

Practising:

$.getJSON("http://destiny.trade/JSON/sortieRewards_f.json", function(result){
  // result, é o seu "data"
});

  • ta dando "Xmlhttprequest cannot load http://destiny.trade/JSON/sortieRewards_f.json. No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'http://127.0.0.1' is therefore not allowed access."

  • The solution to this error is here I can not explain by comment how to solve and also it would be complicated but ai

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.