How to save JSON data to a variable in JavaScript

Question

I'm trying to display ping information in a html page that is presented in JSON format. I have some what achived it but i can't figure out how to print it out in an ordered way.

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

I have taken some inspiration from W3 Schools https://www.w3schools.com/js/tryit.asp?filename=tryjson_parse

Added following to HTML:

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

But are presented with a JSON string that looks like:

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

What is the best/common way to handle and display strings like this on a HTML page so its displayed like:

Example

ip: 10.0.0.161
Port: 21

ect..

you will have to use sth like a template engine where you will pass the object (not the json string) and print the fields the way you want it. If you dont want to use a template engine for only this simple issue, then simply write a js function that accepts object data and returns html string appropriately formatted — Nikos M.
– Nikos M., Commented Feb 20, 2019 at 7:22

ellipsis · Accepted Answer · 2019-02-20 07:34:28Z

4

You can use a forEach loop and set the innerHTML of that element using .textContent property

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>

edited Feb 20, 2019 at 7:34

answered Feb 20, 2019 at 7:21

ellipsis

12.2k2 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ng Sek Long · Accepted Answer · 2019-02-20 07:25:58Z

2

You shouldn't do JSON.stringify on your data, instead just use the data as is.

First step:

Add more html:

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

Seconds Step:

Change your JavaScript as follows:

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

answered Feb 20, 2019 at 7:25

Ng Sek Long

4,8362 gold badges34 silver badges44 bronze badges

Comments

Gowrishankar R · Accepted Answer · 2019-02-20 07:28:56Z

1

This will help you

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

answered Feb 20, 2019 at 7:28

Gowrishankar R

214 bronze badges

Comments

Birbal Singh · Accepted Answer · 2019-02-20 07:33:59Z

1

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>

We can use json object to show on html with 'pre' tag

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>";

answered Feb 20, 2019 at 7:33

Birbal Singh

1,0727 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to save JSON data to a variable in JavaScript

4 Answers 4

Comments

First step:

Seconds Step:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

First step:

Seconds Step:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related