【问题标题】:How to access a specific properties from a complex JSON array object in React.js如何从 React.js 中的复杂 JSON 数组对象访问特定属性
【发布时间】:2022-01-18 12:03:25
【问题描述】:

我需要帮助!我正在尝试从 React.js 中的复杂 JSON 数组对象访问特定属性。这是完整的 JSON,我需要从中获取一些属性。

{
"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": "cve@mitre.org"
                },
                "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": "cve@mitre.org"
                },
                "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": "cve@mitre.org"
                },
                "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": "cve@mitre.org"
                },
                "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": "cve@mitre.org"
                },
                "problemtype": {
                    "problemtype_data": [
                        {
                            "description": [
                                {
                                    "lang": "en",
                                    "value": "NVD-CWE-noinfo"
                                }
                            ]
                        }
                    ]
                },
              
                        ]
                    }
                ]
            },
           
        }
    ]
}

}

我要获取的属性是 ID from CVE_data_meta{}value 来自 description_data{}exploitabilityScoreseverityimpactScore 来自 影响{}

这是我想要渲染此属性的反应组件

 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;

【问题讨论】:

  • CVE 甚至没有 ID 属性。
  • 您可以使用 lodash 在对象的路径上设置get 值。 _.get(responce, 'result.CVE_Items.cve.CVE_data_meta.ID')
  • 我只是想遍历 ID 属性而不是获取单个 ID @FFire

标签: javascript arrays reactjs json


【解决方案1】:

您可能希望将从您的 api 返回的数据或您从文件中读取的数据更改为对您正在尝试执行的操作更有用的格式。

你收到的数据结构大致是-

{
  "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,
            }
          }
        }
      },
     
    ]
  ]
}

由于您只需要其中一些字段,因此您可以通过解构所需字段来减少必须处理的额外数据 -

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

【讨论】:

    【解决方案2】:
    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;
    

    【讨论】:

    • 非常感谢!!!上帝祝福你!!它就像一个魅力!!!
    • 永远欢迎@TeshieEthiopia。如果您接受这个作为答案,那就太好了
    • 我接受了答案!赞成
    【解决方案3】:

    您需要JSON.parse(data) 才能访问这些属性。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-12-21
      • 2017-09-04
      • 1970-01-01
      • 1970-01-01
      • 2021-01-21
      • 2019-06-01
      • 1970-01-01
      相关资源
      最近更新 更多