Как сохранить данные JSON в переменную в JavaScript

Question

Я пытаюсь отобразить информацию ping на html-странице, представленной в формате JSON.У меня есть кое-что, чего я достиг, но я не могу понять, как распечатать его упорядоченным способом.

JS Script

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();
}

Я взял нескольковдохновение от W3 Schools https://www.w3schools.com/js/tryit.asp?filename=tryjson_parse

Добавлено следующее в HTML:

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

Но представлены строки JSON, которые выглядят следующим образом:

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

Что такоелучший / распространенный способ обработки и отображения строк, подобных этой, на странице HTML, поэтому она отображается следующим образом:

Пример

• ip: 10.0.0.161
• Порт: 21

и т. Д.

Answer 1

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


document.getElementById("demo").innerHTML = ""+JSON.stringify(JSON.parse(txt),undefined, 2) +"

";

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

Мы можем использовать объект json для отображения на html с тегом 'pre'

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

";

Answer 2

Вы не должны делать JSON.stringify для своих данных, вместо этого просто используйте data как есть.

Первый шаг:

Добавьте больше html:

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

Секунды Шаг:

Измените ваш JavaScript следующим образом:

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;
});

Answer 3

Это вам поможет

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

Answer 4

Вы можете использовать цикл forEach и установить innerHTML этого элемента, используя .textContent свойство

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)

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