CODEWITHSUNDEEP
javascriptjsonreactjsparsing
RobiminusMaximus
RobiminusMaximus

Reputation: 91

Getting error parsing and displaying JSON object in ReactJS

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!

Upvotes: 0

Views: 760

Answers (1)

Dyo
Dyo

Reputation: 4464

You can create an array of values to render in JSX, you'll probably never need to use document.getElement in React :

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);
    var results = [];
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        results.push(obj[key]);
      }
    }
    return (
        <div> 
            {results.map((value) => <p> {value} </p>)}
        </div>
    );
}

If the JSON you are parsing is a constant you should consider doing the parsing in the constructor or in componentDidMount because doing it in render will reparse your object at each render(if the component state changes)

Upvotes: 1

Related Questions