3
votes

Comment enregistrer des données JSON dans une variable en JavaScript

J'essaie d'afficher les informations de ping dans une page html qui est présentée au format JSON. J'en ai un peu de ce que j'ai obtenu mais je n'arrive pas à comprendre comment l'imprimer de manière ordonnée.

JS Script

{ "ip": "10.0.0.161", "port": 21, "banner": "", "status": "closed (timeout)" }

Je me suis inspiré des écoles W3 https://www.w3schools.com/ js / tryit.asp? filename = tryjson_parse

Ajout de la suite à HTML:

<p id="pingStatus" type="text"></p>

Mais sont présentés avec une chaîne JSON qui ressemble à :

function scanner() {
  var evilscan = require("evilscan");

  var options = {
    target: "10.0.0.161",
    port: "21-23",
    status: "TROU", // Timeout, Refused, Open, Unreachable
    banner: true
  };

  var scanner = new evilscan(options);

  scanner.on("result", function(data) {
    // fired when item is matching options
    console.log(data);
    document.getElementById("pingStatus").innerHTML = JSON.stringify(
      data,
      undefined,
      2
    );
  });

  scanner.on("error", function(err) {
    throw new Error(data.toString());
  });

  scanner.on("done", function() {
    // finished !
  });

  scanner.run();
}

Quelle est la meilleure / commune façon de gérer et d'afficher des chaînes comme celle-ci sur une page HTML afin qu'elle s'affiche comme suit:

Exemple

IP: 10.0.0.161
Port: 21

ect..

javascript html json

1 commentaires

vous devrez utiliser sth comme un moteur de template où vous passerez l'objet (pas la chaîne json) et imprimerez les champs comme vous le souhaitez. Si vous ne souhaitez pas utiliser un moteur de modèle uniquement pour ce problème simple, écrivez simplement une fonction js qui accepte les données d'objet et renvoie une chaîne html formatée de manière appropriée

4 Réponses :

3
votes

Vous pouvez utiliser une boucle forEach et définir le innerHTML de cet élément à l'aide de la propriété .textContent

<p id="pingStatus" type="text"></p>

var a = {
  "ip": "10.0.0.161",
  "port": 21,
  "banner": "",
  "status": "closed (timeout)"
};

var ele = document.getElementById("pingStatus");
Object.values(a).forEach(e => e!=''?ele.innerHTML += '<li>'+e+'</li>':false)

0 commentaires

2
votes

Vous ne devriez pas utiliser JSON.stringify sur vos données, utilisez simplement les données telles quelles.

Première étape:

Ajouter plus de HTML:

scanner.on("result", function(data) {
      // fired when item is matching options
      console.log(data);
      document.getElementById("ip").innerHTML = data.ip;
      document.getElementById("port").innerHTML = data.port;
      document.getElementById("pingStatus").innerHTML = data.status;
});

Secondes Étape:

Modifiez votre JavaScript comme suit:

<p id="ip" type="text"></p>
<p id="port" type="text"></p>
<p id="pingStatus" type="text"></p>

p >

0 commentaires

1
votes

Cela vous aidera

for (x in data) {
  txt += "<p>" + data[x]. ip + "</p>" + "<p>" + data[x]. port + "</p>";
}

0 commentaires

1
votes

var txt = '{"name":"John", "address" : [{"c":"1"}], "age":30, "city":"New York"}'
document.getElementById("demo").innerHTML = "<pre>"+JSON.stringify(JSON.parse(txt),undefined, 2) +"</pre>";

<div id="demo" ></div>

Nous pouvons utiliser l'objet json pour afficher sur html avec la balise 'pre'

var txt = '{"name":"John", "address" : [{"c":"1"}], "age":30, "city":"New York"}';


document.getElementById("demo").innerHTML = "<pre>"+JSON.stringify(JSON.parse(txt),undefined, 2) +"</pre>";

0 commentaires