如何有效地使用 Javascript 解析嵌套的 JSON 数据？答案

【问题标题】：How to parse nested JSON data using Javascript efficiently?如何有效地使用 Javascript 解析嵌套的 JSON 数据？
【发布时间】：2021-08-21 02:02:36
【问题描述】：

我有嵌套的 JSON 数据，我正在尝试使用 Javascript 进行解析：

[
    {
        "fullUrl": "https://replacedURL.org/v/r4/fhir/MedicationRequest/83b6c511-8b78-4fe2-b484-346ddee61933",
        "resource": {
            "resourceType": "MedicationRequest",
            "id": "83b6c511-8b78-4fe2-b484-346ddee61933",
            "meta": {
                "versionId": "4",
                "lastUpdated": "2021-04-06T03:14:44.834-04:00",
                "tag": [
                    {
                        "system": "https://smarthealthit.org/tags",
                        "code": "synthea-5-2019"
                    }
                ]
            },
            "status": "active",
            "intent": "order",
            "medicationCodeableConcept": {
                "coding": [
                    {
                        "system": "http://www.nlm.nih.gov/research/umls/rxnorm",
                        "code": "316049",
                        "display": "Hydrochlorothiazide 25 MG"
                    }
                ],
                "text": "Hydrochlorothiazide 25 MG"
            },
            "subject": {
                "reference": "Patient/2cda5aad-e409-4070-9a15-e1c35c46ed5a"
            },

如何将所有药物的名称解析并打印到 JSON 键“text”下 id="meds" 的 div 元素中？我正在尝试的内容不完整：

   for (var i = 0; i < prop.length; i++) {
        if(typeof obj[prop[i]] == 'undefined')
            return defval;
        obj = obj[prop[i]];
        document.getElementById("meds").innerText = obj ++ ;
    }

不完全确定在这里做什么。请帮忙？

【问题讨论】：

如果JSON需要解析，需要使用JSON.parse。
您能否提供obj 和prop 的定义？如果没有更完整的代码，很难理解你目前拥有的东西。
谢谢@JohnPaulR 这是问题所在——我不知道如何开始定义 obj 和 prop ，也不完全理解 JSON.parse javascript 的放置位置。我不确定如何构造它或循环遍历每个键以打印值。
JSON.parse 读取 JSON 字符串并返回从该 JSON 数据生成的对象。你会像任何 js 对象一样浏览它。

标签： javascript json parsing nested

【解决方案1】：

使用药物列表填充 DIV 元素的步骤包括

获取对数据对象进行编码的 JSON 文本。
解析 JSON（文本）以创建 JavaScript 对象值
使用获得的对象在 DIV 元素中列出药物。

实施步骤 1 取决于前端使用的通信 API 的选择（例如 fetch、axios 或 jQuery），或者 JSON 字符串是否在提供页面时插入页面 HTML 的脚本元素中硬编码.

步骤 2 可能由某些 API 自动包含在步骤 1 中，基于响应内容的 mime 类型，或者通过在响应对象上执行某种json 方法。如果前端获取 JSON 作为文本字符串，它可以调用 JSON.parse 将文本转换为对象。

第 3 步似乎不需要解析 - text 属性是数组条目中的嵌套对象。访问其值的标准快捷符号可能就足够了。例如：

// assume dataArray is the result of parsing the JSON text.
// assume "meds" is the id of a DIV element

function listMeds( dataArray) {
  const div = document.getElementById("meds");
  dataArray
  .map(entry => entry.resource.medicationCodeableConcept.text)
  .map( med=> {
     const span = document.createElement("span");
     span.textContent = med;
     const br = document.createElement("br");
     div.appendChild(span);
     div.appendChild( br);
   })
}

【讨论】：