HTML / Javascript: como acessar dados JSON carregados em uma tag de script com conjunto src

Tenho este arquivo JSON que gero no servidor que desejo tornar acessível no cliente, pois a página pode ser visualizada. Basicamente, o que eu quero alcançar é:

Eu tenho a seguinte tag declarada em meu documento html:

<script id="test" type="application/json" src="http://myresources/stuf.json">

O arquivo referido em sua fonte contém dados JSON. Como vi, os dados foram baixados, assim como acontece com os scripts.

Agora, como faço para acessar em Javascript? Eu tentei acessar a tag de script, com e sem jQuery, usando uma variedade de métodos para tentar obter meus dados JSON, mas de alguma forma isso não funciona. Primeiros seu innerHTMLteria funcionado tinha os dados JSON sido escrito em linha no script. O que não era e não é o que estou tentando alcançar.

Solicitação JSON remota após o carregamento da página também não é uma opção, caso você queira sugerir isso.

Você não pode carregar JSON assim, desculpe.

Eu sei que você está pensando "por que não posso simplesmente usar srcaqui? Já vi coisas assim ...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... bem, para simplificar, foi apenas a tag do script sendo "abusada" como portadora de dados. Você pode fazer isso com todos os tipos de dados. Por exemplo, muitos mecanismos de modelagem utilizam tags de script para conter modelos .

Você tem uma pequena lista de opções para carregar seu JSON de um arquivo remoto:

1. Use $.get('your.json')ou algum outro método AJAX.
2. Escreva um arquivo que defina uma variável global para seu json. (parece piegas).
3. Coloque-o em um iframe invisível e raspe o conteúdo depois de carregado (chamo isso de "modo 1997")
4. Consulte um sacerdote vodu.

Ponto final:

Solicitação JSON remota após o carregamento da página também não é uma opção, caso você queira sugerir isso.

... isso não faz sentido. A diferença entre uma solicitação AJAX e uma solicitação enviada pelo navegador durante o processamento de seu <script src="">é essencialmente nada. Ambos farão um GET no recurso. HTTP não se importa se é feito por causa de uma tag de script ou uma chamada AJAX, e nem o seu servidor.

Outra solução seria usar uma linguagem de script do lado do servidor e simplesmente incluir json-data inline. Aqui está um exemplo que usa PHP:

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

O exemplo acima usa uma tag de script extra com tipo application/json. Uma solução ainda mais simples é incluir o JSON diretamente no JavaScript:

<script>var jsonData = <?php include('stuff.json');?>;</script>

A vantagem da solução com a tag extra é que o código JavaScript e os dados JSON são mantidos separados um do outro.

Parece que isso não é possível, ou pelo menos não é compatível.

Da especificação HTML5 :

Quando usado para incluir blocos de dados (ao contrário de scripts), os dados devem ser embutidos , o formato dos dados deve ser fornecido usando o atributo type, o atributo src não deve ser especificado e o conteúdo do elemento script deve estar em conformidade aos requisitos definidos para o formato utilizado.

Embora atualmente não seja possível com a scripttag, é possível com um iframese for do mesmo domínio.

<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>

Para usar o acima, basta substituir o atributo ide srcpelo que você precisa. O id(que assumiremos nesta situação é igual a mySpecialId) será usado para armazenar os dados em window.jsonData["mySpecialId"].

Em outras palavras, para cada iframe que possui um ide usa o onloadscript terá esses dados carregados de forma síncrona no window.jsonDataobjeto sob o idespecificado.

Fiz isso por diversão e para mostrar que é "possível", mas não recomendo que seja usado.

Aqui está uma alternativa que usa um retorno de chamada.

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

Testado em cromo e deve funcionar no firefox. Não tenho certeza sobre o IE ou Safari.

Eu concordo com Ben. Você não pode carregar / importar o arquivo JSON simples.

Mas se você realmente deseja fazer isso e tem flexibilidade para atualizar o arquivo json, você pode

my-json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>

Verifique esta resposta: https://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Se você precisar carregar JSON de outro domínio: http://en.wikipedia.org/wiki/JSONP
No entanto, esteja ciente de possíveis ataques XSSI: https://www.scip.ch/en/?labs.20160414

Se for o mesmo domínio, então use Ajax.

coloque algo assim no seu arquivo de script json-content.js

var mainjson = { your json data}

em seguida, chame-o da tag do script

<script src="json-content.js"></script>

então você pode usá-lo no próximo script

<script>
console.log(mainjson)
</script>

Outra alternativa para usar o json exato dentro do javascript. Como é Javascript Object Notation, você pode simplesmente criar seu objeto diretamente com a notação json. Se você armazenar isso em um arquivo .js, poderá usar o objeto em seu aplicativo. Essa foi uma opção útil para mim quando eu tinha alguns dados json estáticos que queria armazenar em cache em um arquivo separado do resto do meu aplicativo.

    //Just hard code json directly within JS
    //here I create an object CLC that represents the json!
    $scope.CLC = {
        "ContentLayouts": [
            {
                "ContentLayoutID": 1,
                "ContentLayoutTitle": "Right",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
                "ContentLayoutIndex": 0,
                "IsDefault": true
            },
            {
                "ContentLayoutID": 2,
                "ContentLayoutTitle": "Bottom",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
                "ContentLayoutIndex": 1,
                "IsDefault": false
            },
            {
                "ContentLayoutID": 3,
                "ContentLayoutTitle": "Top",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
                "ContentLayoutIndex": 2,
                "IsDefault": false
            }
        ]
    };