How to get JSON data

Question

How to get JSON data

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (-1 votes)

1

I made a list in JSON with the name of list_json.js and put it in the head of HTML, however I would like to get it in body , the codes work on the console but I can not print on the screen, what am I doing wrong?

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script language="JavaScript" src="lista_json.js" ></script>
    </head>
    <body>
    <h1>lista</h1>
        <p id="teste"></p>
        <script language="JavaScript" src="lista_json.js" > 

            document.getElementById("teste").innerHTML = pag_1.produto;

        </script>

    </body>
</html>

The file lista_json.js:

var pag_1 = {"produto":"produto1", "valor":1}; 
var pag_2 = {"produto":"produto2", "valor":2}; 
var pag_3 = {"produto":"produto3", "valor":3}; 
var pag_4 = {"produto":"produto4", "valor":4}; 
var pag_5 = {"produto":"produto5", "valor":5}; 
var pag_6 = {"produto":"produto6", "valor":6}; 
var pag_7 = {"produto":"produto7", "valor":7}; 
var pag_8 = {"produto":"produto8", "valor":8};

javascript front-end

asked by anonymous 29.04.2017 / 18:01

3 answers

Remove date and print link Doubt over iteration with multiple parameters

score 1 · Answer 1

1

Use it out of <script src="">

<script language="JavaScript" src="teste.js" ></script>
<script>
    document.getElementById("teste").innerHTML = pag_1.produto;
</script>

29.04.2017 / 18:13

score 1 · Answer 2

your error 'and the formatting of the tag script

<script type="text/javascript"> 
    document.getElementById("teste").innerHTML = pag_1.produto;
</script>

no html5 no need to use type="text/javascript" recommending for html4 -

Extra you can do all your json together:

var pag_1 = [{"produto":"produto1", "valor":1},{"produto":"produto2", "valor":2}];

and access this form pag_1[1].produto

score -1 · Answer 3

Use the getJSON function of Jquery:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){
        $.getJSON("lista_json.js", function(result){
            $.each(result, function(i, field){
                $("div").append(field + " ");
            });
        });
    });
});
</script>
</head>
<body>

<button>Get JSON data</button>

<div></div>

</body>
</html>

(Nothing will show up because it does not have JSON, example taken from the W3school site)