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-15T08: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-17T23:17Z",
"lastModifiedDate": "2019-10-09T22: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-18T18:19Z",
"lastModifiedDate": "2018-10-16T16: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-02T11:03Z",
"lastModifiedDate": "2016-05-11T18: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-02T11:03Z",
"lastModifiedDate": "2016-04-30T01: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 >
<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;
CodePudding user response：
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 >
<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;
CodePudding user response：
You need to JSON.parse(data) before being able to access the properties.
useEffect(() => {
axios
.get(baseURL)
.then((response) => {
setData(JSON.parse(response.data));
})
CodePudding user response：
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-15T08: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>
);
});