[RESOLVIDO] "Linkar" arquivo JSON dentro do Javascript

20 de agosto de 2018 5 respostas Resolvido

rodriguesabner 20 de agosto de 2018

Pessoal, eu já consegui linkar o javascript pelo HTML, o problema tá pra linkar o JSON no .js.

Meu arquivo .js:
Eu queria colocar no lugar do “conteudo” o meu outro arquivo JSON, pra deixar o arquivo dinamico…

var conteudo = {
	"nomeV": "Abner Rodrigues",
	"blocoV": "A - 12",
	"rgV": "50.656.978-0",
	"veiculoV" : "Zafira",
	"placaV" : " - " + "AAA-1234",
	"empresaV": "Minha Empresa",
	"datahoraV": "20/08/2018 as 12:35"
	};
	
 	
	var nome = document.getElementById('nome');
	nome.innerHTML = conteudo.nomeV;
	
	var bloco = document.getElementById('bloco');
	bloco.innerHTML = conteudo.blocoV;
	
	var rg = document.getElementById('rg');
	rg.innerHTML = conteudo.rgV;
	
	var veiculo = document.getElementById('veiculo');
	veiculo.innerHTML = conteudo.veiculoV + conteudo.placaV;
	
	var empresa = document.getElementById('empresa');
	empresa.innerHTML = conteudo.empresaV;
	
	var datahora = document.getElementById('datahora');
	datahora.innerHTML = conteudo.datahoraV;

5 Respostas

darlan_machado 20 de ago. de 2018 1 like

Dá uma olhada

rodriguesabner 20 de ago. de 2018

Tentei um exemplo parecido, pronto até. Mas não me retorna nada. Como se a função não estivesse sendo chamada.

Fiz isso:

<!DOCTYPE html>
<html>
    <head>
        <title>Consumindo JSON com Ajax</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <button type="button" id="carregar">Carregar Dados</button>
        <button type="button" id="limpar">Limpar Dados</button>
        <hr />
        <div> Dados serão carregados abaixo </div>
        <hr />
        <div id="mostraDados"></div>
		
    </body>
    <script src="script.js"></script>
</html>

function loadPage() {
    this.addEvent();
}

function addEvent() {
    document.getElementById("carregar").addEventListener("click", mostraDados);
    document.getElementById("limpar").addEventListener("click", limpaDados);
}

function mostraDados() {
    var request, dados, container;
    limpaDados();

    container = getContainer();
    request = verificaRequest();
 
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {

            dados = JSON.parse(request.responseText);

            for (var i in dados) {
                container.innerHTML += '<br />';
                for (var propriedade in dados[i]) {
                    container.innerHTML += propriedade + ' = ';
                    if (typeof dados[i][propriedade] !== 'object') {
                        container.innerHTML += dados[i][propriedade] + '<br>';
                    } else {
                        for (var j in dados[i][propriedade]){
                            container.innerHTML += (j == 0 ) ? "":", ";
                            container.innerHTML += dados[i][propriedade][j];
                         }
                    }
                }
                container.innerHTML += '<hr />';
            }
        }
    };
    request.open("GET", "dados.json", true);
    request.send();
}

function limpaDados() {
     getContainer().innerHTML = "";
}

function verificaRequest() {
     return req = (window.XMLHttpRequest) ? new XMLHttpRequest() :
         new ActiveXObject('Microsoft.XMLHTTP');
}

function getContainer() {
     return document.getElementById("mostraDados");
window.onload = loadPage;
}

Com o exemplo da página que você mandou, acaba não retornando nada também. Já tentei com "===", já mudei o nome do arquivo, já coloquei o caminho absoluto, troquei de pasta… Nada, já joguei pra servidor também

darlan_machado 20 de ago. de 2018

Onde está a chamada para a função que você precisa disparar?

rodriguesabner 20 de ago. de 2018

Na verdade meu HTML é esse aqui:

Meu index.html (Tá no final do html)

<!DOCTYPE html>
<html>
    <title>Consultsegur Serviços - Visitante</title>
    <link rel="shortcut icon" href="C:\Users\abner\Documents\Projetos\Imperium\Launch4J\iconep_X1N_icon.ico" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <link rel="stylesheet" href="style.css" type="text/css">



    <style>
        html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
    </style>
    <body class="w3-light-grey">

        <div class="w3-content w3-margin-top" style="max-width:1400px;">

            <div class="w3-row-padding">

                <div class="w3-third">
                    <div class="w3-white w3-text-grey w3-card-4">
                        <div class="w3-display-container">
                            <img src="Abner.jpg" style="width:100%" alt="Avatar">
                            <div class="w3-display-bottomleft w3-container w3-text-black">
                                <h2> <div id= "nome"> Nome do Visitante</div> </h2>
                            </div>
                        </div>
                        <div class="w3-container">

                            <p><b>Bloco e Apto: </b><label id= "bloco"> Bloco</label></p>
                            <p><b>RG: </b><label id= "rg"> RG + Emissor</label></p>
                            <p><b>Veículo e Placa: </b><label id= "veiculo"> Veiculo + Placa</label></p>
                            <p><b>Empresa: </b><label id= "empresa"> Empresa</label></p>
                            <p><b>Data e Hora: </b><label id= "datahora"> Data + Hora</label></p>

                            <hr>
                        </div>
                        
                    </div><br>


                </div>

                <div class="w3-twothird">

                    <div class="w3-container w3-card w3-white w3-margin-bottom">
                        <h2 class="w3-text-grey w3-padding-16">Evite Confusões!</h2>
                        <div class="w3-container">
                            <h5 class="w3-opacity"><b>Veículos mal estacionados ou em locais proibidos</b></h5>
                            <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i><span class="w3-tag w3-teal w3-round">Veículo</span></h6>
                            <p>Não deixe o carro da sua visita atrapalhando a entrada e saída de veículos e oriente sua visita sobre o limite de velocidade do condomínio.</p>
                            <hr>
                        </div>
                        <div class="w3-container">
                            <h5 class="w3-opacity"><b>Trate os seus vizinhos com respeito</b></h5>
                            <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i><span class="w3-tag w3-teal w3-round">Respeito</span></h6>
                            <p>Consectetur adipisicing elit. Praesentium magnam consectetur vel in deserunt aspernatur est reprehenderit sunt hic. Nulla tempora soluta ea et odio, unde doloremque repellendus iure, iste.</p>
                            <hr>
                        </div>
                        <div class="w3-container">
                            <h5 class="w3-opacity"><b>Avise a portaria se ocorrer algum incidente</b></h5>
                            <h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i><span class="w3-tag w3-teal w3-round">Prevenção</span></h6>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p><br>
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <footer class="w3-container w3-teal w3-center w3-margin-top">
            <p>Consultsegur Serviços.</p>
            <p>Gerado por <a href="https://www.consultsegur.com.br/" target="_blank">Consultsegur</a></p>
        </footer>
<script src = "script.js"></script> --Aqui em chamo o script
    </body>
</html>

Meu script.js

function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'dados.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

Meu dados.json

{

“rgV”:“50.000.000-0”,

“veiculoV”:“Zafira”,

“dataV”:“20/08/2018”,

“blocoV”:“A”,

“aptoV”:“12”,

“placaV”:“DWK - 3818”,

“horaV”:“13:18h”,

“nomeV”:“Abner Rodrigues”,

“empresaV”:“Minha Empresa”

}

Solucao aceita

rodriguesabner 21 de ago. de 2018

ERA A DESGRAÇA DO CHROMEEEEEEEEEEEEEEEEEEEEEEEEEE!!!

Pra qm precisar do código, só adaptar pra vc e vai q vai:

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("dados.json", function(text){
    var dados = JSON.parse(text);
	
	var nome = document.getElementById('nome');
	nome.innerHTML = dados.nomeV;
	
	var bloco = document.getElementById('bloco');
	bloco.innerHTML = dados.blocoV + " - " + dados.aptoV;
	
	var rg = document.getElementById('rg');
	rg.innerHTML = dados.rgV;
	
	var veiculo = document.getElementById('veiculo');
	veiculo.innerHTML = dados.veiculoV + dados.placaV;
	
	var empresa = document.getElementById('empresa');
	empresa.innerHTML = dados.empresaV;
	
	var datahora = document.getElementById('datahora');
	datahora.innerHTML = dados.datahoraV;
	
    console.log(dados);
});

Criado 20 de agosto de 2018

Ultima resposta 21 de ago. de 2018

Respostas 5

Participantes 2

5 Respostas

Topicos relacionados