HTML/Javascript : comment accéder aux données JSON chargées dans une balise script avec src set

Question

HTML/Javascript : comment accéder aux données JSON chargées dans une balise script avec src set

Demandé el 22 de Novembre, 2012: Quand la question a-t-elle été
168141 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai ce fichier JSON que je génère sur le serveur et que je veux rendre accessible sur le client comme la page est visualisable. En gros, ce que je veux réaliser est le suivant :

J'ai la balise suivante déclarée dans mon document html :

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

Le fichier référencé dans sa source contient des données JSON. Comme je l'ai vu, les données ont été téléchargées, tout comme cela se passe avec les scripts.

Maintenant, comment puis-je y accéder en Javascript ? J'ai essayé d'accéder à la balise script, avec et sans jQuery, en utilisant une multitude de méthodes pour essayer d'obtenir mes données JSON, mais d'une manière ou d'une autre, cela ne fonctionne pas. Obtenir son innerHTML aurait fonctionné si les données json avaient été écrites en ligne dans le script. Ce qui n'a pas été le cas et ce n'est pas ce que j'essaie de faire.

La demande JSON à distance après le chargement de la page n'est pas non plus une option, au cas où vous voudriez la suggérer.

Demandé el 22 de Novembre, 2012 par ChuckE

Answer 1

5 Réponses

Answer 2

4voto

Karan Points 41

Je suis d'accord avec Ben. Vous ne pouvez pas charger/importer le simple fichier JSON.

Mais si vous voulez absolument le faire et avoir la possibilité de mettre à jour le fichier json, vous pouvez

mon-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>

Répondu el 24 de Janvier, 2019 par Karan (41 Points )

Answer 3

3voto

Vitaliy Kaplich Points 16

Si vous devez charger JSON à partir d'un autre domaine : http://en.wikipedia.org/wiki/JSONP
Attention toutefois aux attaques potentielles de type XSSI : https://www.scip.ch/en/?labs.20160414

Si c'est le même domaine, il suffit d'utiliser Ajax.

Répondu el 24 de Janvier, 2014 par Vitaliy Kaplich (16 Points )

Answer 4

2voto

L.Grillo Points 841

Cochez cette réponse : https://stackoverflow.com/a/7346598/1764509

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

Répondu el 27 de Janvier, 2017 par L.Grillo (841 Points )

Answer 5

1voto

DominicTurner Points 51

Une autre alternative consiste à utiliser le json exact dans le javascript. Comme il s'agit de la notation d'objet Javascript, vous pouvez simplement créer votre objet directement avec la notation json. Si vous le stockez dans un fichier .js, vous pouvez utiliser l'objet dans votre application. C'était une option utile pour moi lorsque j'avais des données json statiques que je voulais mettre en cache dans un fichier séparé du reste de mon application.

    //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
            }
        ]
    };

Répondu el 22 de Janvier, 2018 par DominicTurner (51 Points )

Answer 6

0voto

Raphaël Benzazon Points 11

Bien qu'il ne soit pas pris en charge, il existe une alternative commune pour obtenir json en javascript. Vous indiquez que la "demande de json à distance" n'est pas une option mais vous pouvez l'envisager car c'est peut-être la meilleure solution qui existe.
Si l'attribut src était pris en charge, il s'agirait d'une requête json à distance. Je ne vois donc pas pourquoi vous voudriez éviter cela tout en cherchant activement à le faire de manière presque identique.

Solution :

<script>
    async function loadJson(){
        const res = await fetch('content.json');
        const json = await res.json();
    }
    loadJson();
</script>

Avantages

permet la mise en cache, assurez-vous que votre hébergement/serveur le configure correctement.
sur chrome, après avoir profilé en utilisant l'onglet performance, j'ai remarqué qu'il a la plus petite empreinte CPU par rapport à : inline JS, inline JSON, external JS.

Répondu el 25 de Mai, 2022 par Raphaël Benzazon (11 Points )

HTML/Javascript : comment accéder aux données JSON chargées dans une balise script avec src set

Réponses

Solution :

Avantages

Questions en vedette

Top Tags

Prograide.com

Powered by:

HTML/Javascript : comment accéder aux données JSON chargées dans une balise script avec src set

Réponses

Solution :

Avantages

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: