How to access a specific properties from a complex JSON array object in React.js

Question

Well I need help! I am trying to access a specific properties from a complex JSON array object in React.js. Here is the complete JSON where I need to grab some properties from.

{
"resultsPerPage": 7,
"startIndex": 0,
"totalResults": 7,
"result": {
 "CVE_data_type": "CVE",
 "CVE_data_format": "MITRE",
 "CVE_data_version": "4.0",
 "CVE_data_timestamp": "2021年12月15日T08:44Z",
 "CVE_Items": [
 {
 "cve": {
 "data_type": "CVE",
 "data_format": "MITRE",
 "data_version": "4.0",
 "CVE_data_meta": {
 "ID": "CVE-2007-5532",
 "ASSIGNER": "[email protected]"
 },
 "problemtype": {
 "problemtype_data": [
 {
 "description": [
 {
 "lang": "en",
 "value": "NVD-CWE-noinfo"
 }
 ]
 }
 ]
 },
 "references": {
 "reference_data": [
 {
 "url": "http://www.securitytracker.com/id?1018823",
 "name": "1018823",
 "refsource": "SECTRACK",
 "tags": [
 "Third Party Advisory",
 "VDB Entry"
 ]
 },
 {
 "url": "http://secunia.com/advisories/27251",
 "name": "27251",
 "refsource": "SECUNIA",
 "tags": [
 "Third Party Advisory"
 ]
 },
 {
 "url": "http://www.us-cert.gov/cas/techalerts/TA07-290A.html",
 "name": "TA07-290A",
 "refsource": "CERT",
 "tags": [
 "Third Party Advisory",
 "US Government Resource"
 ]
 },
 {
 "url": "http://secunia.com/advisories/27409",
 "name": "27409",
 "refsource": "SECUNIA",
 "tags": [
 "Third Party Advisory"
 ]
 },
 {
 "url": "http://www.vupen.com/english/advisories/2007/3524",
 "name": "ADV-2007-3524",
 "refsource": "VUPEN",
 "tags": [
 "Permissions Required"
 ]
 },
 {
 "url": "http://www.vupen.com/english/advisories/2007/3626",
 "name": "ADV-2007-3626",
 "refsource": "VUPEN",
 "tags": [
 "Permissions Required"
 ]
 },
 {
 "url": "http://marc.info/?l=bugtraq&m=119332677525918&w=2",
 "name": "SSRT061201",
 "refsource": "HP",
 "tags": [
 "Mailing List",
 "Third Party Advisory"
 ]
 },
 {
 "url": "http://www.oracle.com/technetwork/topics/security/cpuoct2007-092913.html",
 "name": "http://www.oracle.com/technetwork/topics/security/cpuoct2007-092913.html",
 "refsource": "CONFIRM",
 "tags": [
 "Vendor Advisory"
 ]
 }
 ]
 },
 "description": {
 "description_data": [
 {
 "lang": "en",
 "value": "Unspecified vulnerability in the People Tools component in Oracle PeopleSoft Enterprise and JD Edwards EnterpriseOne 8.22.17, 8.47.14, 8.48.13, 8.49.05 has unknown impact and remote attack vectors, aka PSE01."
 }
 ]
 }
 },
 "configurations": {
 "CVE_data_version": "4.0",
 "nodes": [
 {
 "operator": "OR",
 "children": [],
 "cpe_match": [
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:*:*:*:*:*:*:*:*",
 "versionStartIncluding": "8.47",
 "versionEndIncluding": "8.47.14",
 "cpe_name": []
 },
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:*:*:*:*:*:*:*:*",
 "versionStartIncluding": "8.49",
 "versionEndIncluding": "8.49.05",
 "cpe_name": []
 },
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:*:*:*:*:*:*:*:*",
 "versionStartIncluding": "8.22",
 "versionEndIncluding": "8.22.17",
 "cpe_name": []
 },
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:*:*:*:*:*:*:*:*",
 "versionStartIncluding": "8.48",
 "versionEndIncluding": "8.48.13",
 "cpe_name": []
 }
 ]
 }
 ]
 },
 "impact": {
 "baseMetricV2": {
 "cvssV2": {
 "version": "2.0",
 "vectorString": "AV:N/AC:L/Au:N/C:P/I:P/A:P",
 "accessVector": "NETWORK",
 "accessComplexity": "LOW",
 "authentication": "NONE",
 "confidentialityImpact": "PARTIAL",
 "integrityImpact": "PARTIAL",
 "availabilityImpact": "PARTIAL",
 "baseScore": 7.5
 },
 "severity": "HIGH",
 "exploitabilityScore": 10,
 "impactScore": 6.4,
 "obtainAllPrivilege": false,
 "obtainUserPrivilege": false,
 "obtainOtherPrivilege": false,
 "userInteractionRequired": false
 }
 },
 "publishedDate": "2007年10月17日T23:17Z",
 "lastModifiedDate": "2019年10月09日T22:54Z"
 },
 {
 "cve": {
 "data_type": "CVE",
 "data_format": "MITRE",
 "data_version": "4.0",
 "CVE_data_meta": {
 "ID": "CVE-2007-2131",
 "ASSIGNER": "[email protected]"
 },
 "problemtype": {
 "problemtype_data": [
 {
 "description": [
 {
 "lang": "en",
 "value": "NVD-CWE-Other"
 }
 ]
 }
 ]
 },
 "references": {
 "reference_data": [
 {
 "url": "http://www.red-database-security.com/advisory/oracle_cpu_apr_2007.html",
 "name": "http://www.red-database-security.com/advisory/oracle_cpu_apr_2007.html",
 "refsource": "MISC",
 "tags": []
 },
 {
 "url": "http://www.securitytracker.com/id?1017927",
 "name": "1017927",
 "refsource": "SECTRACK",
 "tags": []
 },
 {
 "url": "http://www.us-cert.gov/cas/techalerts/TA07-108A.html",
 "name": "TA07-108A",
 "refsource": "CERT",
 "tags": [
 "US Government Resource"
 ]
 },
 {
 "url": "http://www.securityfocus.com/bid/23532",
 "name": "23532",
 "refsource": "BID",
 "tags": []
 },
 {
 "url": "http://www.vupen.com/english/advisories/2007/1426",
 "name": "ADV-2007-1426",
 "refsource": "VUPEN",
 "tags": []
 },
 {
 "url": "http://www.oracle.com/technetwork/topics/security/cpuapr2007-090632.html",
 "name": "http://www.oracle.com/technetwork/topics/security/cpuapr2007-090632.html",
 "refsource": "CONFIRM",
 "tags": []
 },
 {
 "url": "http://www.securityfocus.com/archive/1/466329/100/200/threaded",
 "name": "SSRT061201",
 "refsource": "HP",
 "tags": []
 }
 ]
 },
 "description": {
 "description_data": [
 {
 "lang": "en",
 "value": "Unspecified vulnerability in PeopleTools in Oracle PeopleSoft Enterprise 8.22.14, 8.47.12, and 8.48.08 has unknown impact and attack vectors, aka PSE01."
 }
 ]
 }
 },
 "configurations": {
 "CVE_data_version": "4.0",
 "nodes": [
 {
 "operator": "OR",
 "children": [],
 "cpe_match": [
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:8.22.14:*:*:*:*:*:*:*",
 "cpe_name": []
 },
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:8.47.12:*:*:*:*:*:*:*",
 "cpe_name": []
 },
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:8.48.08:*:*:*:*:*:*:*",
 "cpe_name": []
 }
 ]
 }
 ]
 },
 "impact": {
 "baseMetricV2": {
 "cvssV2": {
 "version": "2.0",
 "vectorString": "AV:N/AC:L/Au:N/C:C/I:C/A:C",
 "accessVector": "NETWORK",
 "accessComplexity": "LOW",
 "authentication": "NONE",
 "confidentialityImpact": "COMPLETE",
 "integrityImpact": "COMPLETE",
 "availabilityImpact": "COMPLETE",
 "baseScore": 10
 },
 "severity": "HIGH",
 "exploitabilityScore": 10,
 "impactScore": 10,
 "obtainAllPrivilege": false,
 "obtainUserPrivilege": false,
 "obtainOtherPrivilege": false,
 "userInteractionRequired": false
 }
 },
 "publishedDate": "2007年04月18日T18:19Z",
 "lastModifiedDate": "2018年10月16日T16:42Z"
 },
 {
 "cve": {
 "data_type": "CVE",
 "data_format": "MITRE",
 "data_version": "4.0",
 "CVE_data_meta": {
 "ID": "CVE-2005-3463",
 "ASSIGNER": "[email protected]"
 },
 "problemtype": {
 "problemtype_data": [
 {
 "description": [
 {
 "lang": "en",
 "value": "NVD-CWE-noinfo"
 }
 ]
 }
 ]
 },
 "references": {
 "reference_data": [
 {
 "url": "http://www.us-cert.gov/cas/techalerts/TA05-292A.html",
 "name": "TA05-292A",
 "refsource": "CERT",
 "tags": [
 "US Government Resource"
 ]
 },
 {
 "url": "http://www.kb.cert.org/vuls/id/210524",
 "name": "VU#210524",
 "refsource": "CERT-VN",
 "tags": [
 "US Government Resource"
 ]
 },
 {
 "url": "http://www.securityfocus.com/bid/15134",
 "name": "15134",
 "refsource": "BID",
 "tags": []
 },
 {
 "url": "http://secunia.com/advisories/17250",
 "name": "17250",
 "refsource": "SECUNIA",
 "tags": []
 },
 {
 "url": "http://www.oracle.com/technetwork/topics/security/cpuoct2005-090497.html",
 "name": "http://www.oracle.com/technetwork/topics/security/cpuoct2005-090497.html",
 "refsource": "CONFIRM",
 "tags": []
 }
 ]
 },
 "description": {
 "description_data": [
 {
 "lang": "en",
 "value": "Unspecified vulnerability in PeopleTools in Oracle PeopleSoft Enterprise 8.44 up to 8.46.03 has unknown impact and attack vectors, as identified by Oracle Vuln# PSE03."
 }
 ]
 }
 },
 "configurations": {
 "CVE_data_version": "4.0",
 "nodes": [
 {
 "operator": "OR",
 "children": [],
 "cpe_match": [
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:8.44:*:*:*:*:*:*:*",
 "cpe_name": []
 },
 {
 "vulnerable": true,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:*:*:*:*:*:*:*:*",
 "versionEndIncluding": "8.46.03",
 "cpe_name": []
 }
 ]
 }
 ]
 },
 "impact": {
 "baseMetricV2": {
 "cvssV2": {
 "version": "2.0",
 "vectorString": "AV:N/AC:L/Au:N/C:C/I:C/A:C",
 "accessVector": "NETWORK",
 "accessComplexity": "LOW",
 "authentication": "NONE",
 "confidentialityImpact": "COMPLETE",
 "integrityImpact": "COMPLETE",
 "availabilityImpact": "COMPLETE",
 "baseScore": 10
 },
 "severity": "HIGH",
 "exploitabilityScore": 10,
 "impactScore": 10,
 "obtainAllPrivilege": false,
 "obtainUserPrivilege": false,
 "obtainOtherPrivilege": false,
 "userInteractionRequired": false
 }
 },
 "publishedDate": "2005年11月02日T11:03Z",
 "lastModifiedDate": "2016年05月11日T18:14Z"
 },
 {
 "cve": {
 "data_type": "CVE",
 "data_format": "MITRE",
 "data_version": "4.0",
 "CVE_data_meta": {
 "ID": "CVE-2005-3461",
 "ASSIGNER": "[email protected]"
 },
 "problemtype": {
 "problemtype_data": [
 {
 "description": [
 {
 "lang": "en",
 "value": "NVD-CWE-Other"
 }
 ]
 }
 ]
 },
 "references": {
 "reference_data": [
 {
 "url": "http://www.us-cert.gov/cas/techalerts/TA05-292A.html",
 "name": "TA05-292A",
 "refsource": "CERT",
 "tags": [
 "US Government Resource"
 ]
 },
 {
 "url": "http://www.kb.cert.org/vuls/id/210524",
 "name": "VU#210524",
 "refsource": "CERT-VN",
 "tags": [
 "US Government Resource"
 ]
 },
 {
 "url": "http://www.securityfocus.com/bid/15134",
 "name": "15134",
 "refsource": "BID",
 "tags": []
 },
 {
 "url": "http://secunia.com/advisories/17250",
 "name": "17250",
 "refsource": "SECUNIA",
 "tags": []
 },
 {
 "url": "http://www.oracle.com/technetwork/topics/security/cpuoct2005-090497.html",
 "name": "http://www.oracle.com/technetwork/topics/security/cpuoct2005-090497.html",
 "refsource": "CONFIRM",
 "tags": []
 }
 ]
 },
 "description": {
 "description_data": [
 {
 "lang": "en",
 "value": "Unspecified vulnerability in PeopleTools in Oracle PeopleSoft Enterprise 8.42 up to 8.45.17 has unknown impact and attack vectors, as identified by Oracle Vuln# PSE01."
 }
 ]
 }
 },
 "configurations": {
 "CVE_data_version": "4.0",
 "nodes": [
 {
 "operator": "OR",
 "children": [],
 "cpe_match": [
 {
 "vulnerable": false,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:8.1:*:*:*:*:*:*:*",
 "cpe_name": []
 },
 {
 "vulnerable": false,
 "cpe23Uri": "cpe:2.3:a:oracle:peoplesoft_enterprise:*:*:*:*:*:*:*:*",
 "versionEndIncluding": "8.45.17",
 "cpe_name": []
 }
 ]
 }
 ]
 },
 "impact": {
 "baseMetricV2": {
 "cvssV2": {
 "version": "2.0",
 "vectorString": "AV:N/AC:L/Au:N/C:C/I:C/A:C",
 "accessVector": "NETWORK",
 "accessComplexity": "LOW",
 "authentication": "NONE",
 "confidentialityImpact": "COMPLETE",
 "integrityImpact": "COMPLETE",
 "availabilityImpact": "COMPLETE",
 "baseScore": 10
 },
 "severity": "HIGH",
 "exploitabilityScore": 10,
 "impactScore": 10,
 "obtainAllPrivilege": false,
 "obtainUserPrivilege": false,
 "obtainOtherPrivilege": false,
 "userInteractionRequired": false
 }
 },
 "publishedDate": "2005年11月02日T11:03Z",
 "lastModifiedDate": "2016年04月30日T01:59Z"
 },
 {
 "cve": {
 "data_type": "CVE",
 "data_format": "MITRE",
 "data_version": "4.0",
 "CVE_data_meta": {
 "ID": "CVE-2007-5534",
 "ASSIGNER": "[email protected]"
 },
 "problemtype": {
 "problemtype_data": [
 {
 "description": [
 {
 "lang": "en",
 "value": "NVD-CWE-noinfo"
 }
 ]
 }
 ]
 },
 
 ]
 }
 ]
 },
 
 }
 ]
}

}

The properties I wanted to fetch are ID from CVE_data_meta{}, value from description_data{} and exploitabilityScore, severity and impactScore from impact{}

Here is my react component where i wanted to render this properties

 import React, { useState, useEffect } from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
const VendorsDetail = () => {
 const [data, setData] = useState({});
 const baseURL =
 "http://127.0.0.1:8000/api/business_process/business-impact/vendor-product-detail";
 useEffect(() => {
 axios
 .get(baseURL)
 .then((response) => {
 setData(response.data);
 })
 .then(
 (response) => {},
 (err) => {
 alert("No Data To Show");
 }
 )
 .catch((err) => {
 return false;
 });
 }, []);
 const DisplayData = data.result.CVE_Items.cve.CVE_data_meta?.map((vendor) => {
 return (
 <tr>
 <td>{vendor.ID}</td>
 </tr>
 );
 });
 return (
 <div className="z-100">
 <div className="text-black">
 <div className="rounded overflow-hidden flex justify-center items-center">
 <table class="table table-striped ">
 <thead>
 <tr>
 <th>ID</th>
 <th>DESCRIPTION DATA</th>
 <th>value</th>
 <th>exploitabilityScore</th>
 <th>severity</th>
 <th>impactScore</th>
 </tr>
 </thead>
 <tbody>{DisplayData}</tbody>
 </table>
 </div>
 <h1>{foo}</h1>
 </div>
 </div>
 );
};
export default VendorsDetail;

• hellogoodnight: CVE doens't even have an ID property.
• A1exandr Belan: You can use lodash to get value at path of object. _.get(responce, 'result.CVE_Items.cve.CVE_data_meta.ID')
• Teshie Ethiopia: I just wanted to iterate through ID property instead of getting a single ID @FFire

Answer 1

import React, { useState, useEffect } from "react";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import axios from "axios";
const VendorsDetail = () => {
 const [data, setData] = useState({});
 const baseURL =
 "http://127.0.0.1:8000/api/business_process/business-impact/vendor-product-detail";
 useEffect(() => {
 axios
 .get(baseURL)
 .then((response) => {
 setData(response.data);
 })
 .then(
 (response) => {},
 (err) => {
 alert("No Data To Show");
 }
 )
 .catch((err) => {
 return false;
 });
 }, []);
?
 const DisplayData = data?.result?.CVE_Items.map((vender) => {
 return (
 <tr>
 <td>{vendor?.cve?.CVE_data_meta?.ID}</td>
<td>{vendor?.cve?.description?.description_data?.[0]?.lang}</td>
<td>{vendor?.cve?.impact?.exploitabilityScore}</td>
<td>{vendor?.cve?.impact?.severity}</td>
<td>{vendor?.cve?.impact?.impactScore}</td>
 </tr>
 );
 });
 return (
 <div className="z-100">
 <div className="text-black">
 <div className="rounded overflow-hidden flex justify-center items-center">
 <table class="table table-striped ">
 <thead>
 <tr>
 <th>ID</th>
 <th>DESCRIPTION DATA</th>
 <th>value</th>
 <th>exploitabilityScore</th>
 <th>severity</th>
 <th>impactScore</th>
 </tr>
 </thead>
 <tbody>{DisplayData}</tbody>
 </table>
 </div>
 <h1>{foo}</h1>
 </div>
 </div>
 );
};
export default VendorsDetail;

• MhkAsif: Always welcome @TeshieEthiopia. It would be great if you accept this as an answer

Answer 2

You need to JSON.parse(data) before being able to access the properties.

 useEffect(() => {
 axios
 .get(baseURL)
 .then((response) => {
 setData(JSON.parse(response.data));
 })

Answer 3

You probably want to change the data you get back from your api or that you are reading from a file into a more useable format for what you are trying to do.

The data structure you are receiving is roughly -

{
 "resultsPerPage":7,
 "startIndex":0,
 "totalResults":7,
 "result": [
 "CVE_data_type":"CVE",
 "CVE_data_format":"MITRE",
 "CVE_data_version":"4.0",
 "CVE_data_timestamp":"2021年12月15日T08:44Z",
 "CVE_Items": [
 { 
 "cve": {
 "CVE_data_meta": { ID: "THE ID YOU WANT" },
 "description": {
 "description_data": [{ "lang" : "en", "value": "problem desc"}],
 },
 },
 "impact": {
 "baseMetricV2": {
 "cvssv2": {
 "severity":"HIGH",
 "exploitabilityScore":10,
 "impactScore":6.4,
 }
 }
 }
 },
 
 ]
 ]
}

Since you only need some of these fields, you can reduce the extra data you have to deal with by destructuring off the needed fields -

const DisplayData = data?.result?.CVE_Items.map(({
 cve: { 
 CVE_data_meta: { ID }, 
 description: { description_data },
 },
 impact: {
 baseMetricV2: {
 cvssv2: {
 severity,
 exploitabilityScore,
 impactScore,
 }
 }
 }
}) => {
 return (
 <tr>
 <td>{ID}</td>
 <td>{description_data.map(({value}) =>value).join(",")}</td>
 <td>{exploitabilityScore}</td>
 <td>{severity}</td>
 <td>{impactScore}</td>
 </tr>
 );
});