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;
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
Onde está a chamada para a função que você precisa disparar?
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”
}
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);
});