如何在JavaScript中将JSON数据保存到变量中

Question

我是一个有用的助手，可以为您翻译文本。以下是需要翻译的内容：

我正在尝试在以JSON格式呈现的HTML页面中显示ping信息。

我已经部分完成了它，但我无法弄清楚如何以有序的方式打印它。

JS脚本

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

等等。

- Christophermp

---

你需要使用类似模板引擎的工具，将对象传入其中（而不是JSON字符串），并按照所需格式打印字段。如果你不想为这个简单问题使用模板引擎，那么可以编写一个接受对象数据并返回适当格式化的HTML字符串的JS函数。 - Nikos M.

Answer 1

您可以使用forEach循环，并通过.textContent属性设置该元素的innerHTML。

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>

- ellipsis

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

- Ng Sek Long

Answer 3

这将会帮助你。

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

- Gowrishankar R

Answer 4

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>

我们可以使用JSON对象在HTML中显示，使用'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>";

- Birbal Singh