How to receive JSON data? [closed]

Navigation
0

I want to retrieve a JSON code for HTML with jQuery. How can I do this? And how can I use CSS with JSON data?

Here is the JSON code. 

{
  "version": "0.1.1",
  "box_name": "A Fazenda - Ranking",
  "data": [
    {
      "__id": "f8c3500f39017602234a031caa64a8b4",
      "timestamp": 1408396531382,
      "name": "Rita Cadillac",
      "description": "Cracrete nº1",
      "picture": "http://im.r7.com/record/files/2C96/1617/3F6E/32AE/013F/72F9/AD72/3CE1/RitaCadillac1.jpg",
      "positive": 51638022,
      "negative": 18143089
    },
    {
      "__id": "7b1dd3f58be97715e9e06475bb58fce5",
      "timestamp": 1408396481826,
      "name": "Gominho",
      "description": "Fofoqueiro de Plantão",
      "picture": "http://im.r7.com/record/files/2C96/1618/3F6E/369D/013F/72F7/CF15/5F4B/Gominho1.jpg",
      "positive": "23249923",
      "negative": "39587707"
    },
    {
      "__id": "70580002438b08c63286d08b7c43fb4c",
      "timestamp": 1408396545027,
      "name": "Yudi Tamashiro",
      "description": "Apresentador e ídolo teen",
      "picture": "http://im.r7.com/record/files/2C96/1617/3F6E/32AE/013F/72FD/87BB/4436/Yudi1.jpg",
      "positive": 59089056,
      "negative": 14772265
    },
    {
      "__id": "3404c4a70e7704009cd1915a349189f4",
      "timestamp": 1408396555971,
      "name": "Andressa Urach",
      "description": "Personalidade da mídia",
      "picture": "http://im.r7.com/record/files/2C96/1618/3F6E/369D/013F/72EF/C598/41DC/Andressa1.jpg",
      "positive": null,
      "age": 32
    },
    {
      "__id": "c97686edbeb8df774a567e9884f4d490",
      "timestamp": 1408396562866,
      "name": "Bárbara Evans",
      "description": "Modelo e filha de Monique Evans",
      "picture": "http://im.r7.com/record/files/2C96/1618/3F6E/369D/013F/72F6/B48C/5BBD/B%C3%A1rbaraEvans1.jpg",
      "positive": 69274684,
      "negative": 9446548
    }
  ]
}
    
asked by anonymous 19.06.2018 / 20:37

2 answers

0

To receive JSON you can use AXIOS instead of jQuery with the axios.get command. To integrate with the HTML and CSS interface you can use VueJS.

Use this complete example that I put together using HTML, JavaScript, VueJS and AXIOS:

Click: View Json using HTML

Create a ViewJson.html file and place this content: 

<html>
    <head>
        <title>Exemplo JSON</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- Mobile viewport optimized: h5bp.com/viewport -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="viewport" content="width=device-width" />

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>

        <div id="app">
          <h1>{{ message }}</h1><br>

          Versão:<br>
          {{dados.version}}<br>

          Dados:<br>
          <div v-for="detalhe in dados.data">
            Nome:{{detalhe.name}}<br>
            Descricao:{{detalhe.description}}<br>
            <img :src="detalhe.picture" >
            <hr>
          </div>
        </div>

        <script>
        var app = new Vue(
                    {
                        el: '#app',
                        data: 
                        {
                            message: 'Hello Vue!',
                            dados: {}
                        },
                        mounted() 
                        {
                            axios.get("https://exemplos.azurewebsites.net/r7.json.txt").then(response => 
                            { 
                                //Aqui você pega a resposta e trata ela 
                                app.dados = response.data;
                            }).catch(err => 
                            { 
                                // Aqui trata algum erro na resposta 
                                alert(err);
                            });
                            // alert('mounted()');
                        }
                    });
        </script>

    </body>
</html>
    
19.06.2018 / 23:17
0

Using jQuery, you can use the jQuery.ajax function to get json and manipulate it.

On the server side, assuming it would be PHP, there would be something like an array with the data, say $ data. Assemble a URL that returns json_encode ($ data), passing a header content type: application / json. 

header('Content-Type', 'application/json');
return json_encode($data);

In Javascript, I would call: 

jQuery.ajax({
   url: 'url do script php q retorna o json(acima)',
   dataType: 'json',
   success: function (response) {
       alert(response[0].name);
   }
});
    
19.06.2018 / 23:25
Close Activity in a Fragment operation Set value in session in Database