I am attempting to parse and display a large JSON object on a dashboard I am creating and I think I am getting an error because of the way that I am formatting the javascript within my component. Here is the code as it is:
import React, { Component } from 'react';
class WhoIs extends Component {
render() {
var origObject = {"id":3,"code":"\nfrom ipwhois import IPWhois\nimport json\nobj = IPWhois('104.24.114.36')\nresults = obj.lookup_rdap(depth=1)\nprint(json.dumps(results))\n","state":"available","output":{"status":"ok","execution_count":3,"data":{"text/plain":"{\"raw\": null, \"entities\": [\"CLOUD14\", \"ABUSE2916-ARIN\", \"ADMIN2521-ARIN\", \"NOC11962-ARIN\"], \"asn_registry\": \"arin\", \"network\": {\"status\": null, \"handle\": \"NET-104-16-0-0-1\", \"name\": \"CLOUDFLARENET\", \"links\": [\"https://rdap.arin.net/registry/ip/104.16.0.0\", \"https://whois.arin.net/rest/net/NET-104-16-0-0-1\"], \"raw\": null, \"country\": null, \"ip_version\": \"v4\", \"start_address\": \"104.16.0.0\", \"notices\": [{\"description\": \"By using the ARIN RDAP/Whois service, you are agreeing to the RDAP/Whois Terms of Use\", \"links\": [\"https://www.arin.net/whois_tou.html\"], \"title\": \"Terms of Service\"}], \"end_address\": \"104.31.255.255\", \"remarks\": [], \"parent_handle\": \"NET-104-0-0-0-0\", \"cidr\": \"104.16.0.0/12\", \"type\": null, \"events\": [{\"action\": \"last changed\", \"timestamp\": \"2017-02-17T18:08:30-05:00\", \"actor\": null}, {\"action\": \"registration\", \"timestamp\": \"2014-03-28T10:30:55-04:00\", \"actor\": null}]}, \"objects\": {\"CLOUD14\": {\"status\": null, \"roles\": [\"registrant\"], \"handle\": \"CLOUD14\", \"entities\": [\"ABUSE2916-ARIN\", \"ADMIN2521-ARIN\", \"NOC11962-ARIN\"], \"links\": [\"https://rdap.arin.net/registry/entity/CLOUD14\", \"https://whois.arin.net/rest/org/CLOUD14\"], \"raw\": null, \"notices\": null, \"contact\": {\"kind\": \"org\", \"name\": \"Cloudflare, Inc.\", \"title\": null, \"phone\": null, \"role\": null, \"address\": [{\"type\": null, \"value\": \"101 Townsend Street\\nSan Francisco\\nCA\\n94107\\nUnited States\"}], \"email\": null}, \"events_actor\": null, \"remarks\": [], \"events\": [{\"action\": \"last changed\", \"timestamp\": \"2017-02-17T18:19:16-05:00\", \"actor\": null}, {\"action\": \"registration\", \"timestamp\": \"2010-07-09T13:10:42-04:00\", \"actor\": null}]}, \"ADMIN2521-ARIN\": {\"status\": [\"validated\"], \"roles\": [\"technical\"], \"handle\": \"ADMIN2521-ARIN\", \"entities\": null, \"links\": [\"https://rdap.arin.net/registry/entity/ADMIN2521-ARIN\", \"https://whois.arin.net/rest/poc/ADMIN2521-ARIN\"], \"raw\": null, \"notices\": null, \"contact\": {\"kind\": \"group\", \"name\": \"Admin\", \"title\": null, \"phone\": [{\"type\": [\"work\", \"voice\"], \"value\": \"+1-650-319-8930\"}], \"role\": null, \"address\": [{\"type\": null, \"value\": \"101 Townsend Street\\nSan Francisco\\nCA\\n94107\\nUnited States\"}], \"email\": [{\"type\": null, \"value\": \"[email protected]\"}]}, \"events_actor\": null, \"remarks\": [], \"events\": [{\"action\": \"last changed\", \"timestamp\": \"2017-10-05T15:42:30-04:00\", \"actor\": null}, {\"action\": \"registration\", \"timestamp\": \"2011-04-19T15:11:36-04:00\", \"actor\": null}]}, \"ABUSE2916-ARIN\": {\"status\": [\"validated\"], \"roles\": [\"abuse\"], \"handle\": \"ABUSE2916-ARIN\", \"entities\": null, \"links\": [\"https://rdap.arin.net/registry/entity/ABUSE2916-ARIN\", \"https://whois.arin.net/rest/poc/ABUSE2916-ARIN\"], \"raw\": null, \"notices\": null, \"contact\": {\"kind\": \"group\", \"name\": \"Abuse\", \"title\": null, \"phone\": [{\"type\": [\"work\", \"voice\"], \"value\": \"+1-650-319-8930\"}], \"role\": null, \"address\": [{\"type\": null, \"value\": \"101 Townsend Street\\nSan Francisco\\nCA\\n94107\\nUnited States\"}], \"email\": [{\"type\": null, \"value\": \"[email protected]\"}]}, \"events_actor\": null, \"remarks\": [], \"events\": [{\"action\": \"last changed\", \"timestamp\": \"2017-02-17T18:11:38-05:00\", \"actor\": null}, {\"action\": \"registration\", \"timestamp\": \"2011-02-14T19:00:47-05:00\", \"actor\": null}]}, \"NOC11962-ARIN\": {\"status\": [\"validated\"], \"roles\": [\"noc\"], \"handle\": \"NOC11962-ARIN\", \"entities\": null, \"links\": [\"https://rdap.arin.net/registry/entity/NOC11962-ARIN\", \"https://whois.arin.net/rest/poc/NOC11962-ARIN\"], \"raw\": null, \"notices\": null, \"contact\": {\"kind\": \"group\", \"name\": \"NOC\", \"title\": null, \"phone\": [{\"type\": [\"work\", \"voice\"], \"value\": \"+1-650-319-8930\"}], \"role\": null, \"address\": [{\"type\": null, \"value\": \"101 Townsend Street\\nSan Francisco\\nCA\\n94107\\nUnited States\"}], \"email\": [{\"type\": null, \"value\": \"[email protected]\"}]}, \"events_actor\": null, \"remarks\": [], \"events\": [{\"action\": \"last changed\", \"timestamp\": \"2017-02-17T18:15:44-05:00\", \"actor\": null}, {\"action\": \"registration\", \"timestamp\": \"2011-04-19T15:25:31-04:00\", \"actor\": null}]}}, \"asn_country_code\": \"US\", \"asn_date\": \"2014-03-28\", \"asn_cidr\": \"104.24.112.0/20\", \"nir\": null, \"query\": \"104.24.114.36\", \"asn\": \"13335\"}"}},"progress":1.0};
var myTarget = origObject.output.data['text/plain'];
var obj = JSON.parse(myTarget);
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
document.getElementById('mydiv').innerHTML
console.log(key + " -> " + obj[key]);
}
}
return (
<div className="col-md-12 bucket">
<div className="card">
<div className="card-header">
<span className="header-title">
Table Header
</span>
<span className="float-right">
<button className="btn btn-sm dl-btn"><i className="fa fa-download" aria-hidden="true"></i></button>
</span>
</div>
<div className="card-block data-block">
<div id="mydiv"></div>
</div>
</div>
</div>
);
}
}
export default WhoIs;
After the return() I have a div with "mydiv" assigned to it. If I take out the document.getElementById and just use the console.log I get all of the objects parsed and no errors. From my understanding this type error seems to come from the html div with the id assigned being placed after my script code, but I've tried placing the JS after the return() but it doesn't work. I would assume this is a formatting issue with React??? Any help would be appreciated. Thanks!
