从 JavaScript 中的 JSON 获取节点的未知子节点

Question

我目前正在构建一个工具，用于提取 URL 的 Core Web Vitals 指标。

使用 API 我可以接收一个 JSON 对象，我可以使用 JSONPath 访问它。

我想使用 forEach 循环将数据输入 HTML 字段。

现在我的问题是，如何在不使用名称的情况下访问 JSON 的子节点？

document.querySelectorAll('[data-section^="cww"]').forEach((nodes, index) => {
    console.log(values.body.record.metrics);
});

{
    "key": {
        "origin": "https://developer.mozilla.org"
    },
    "metrics": {
        "cumulative_layout_shift": {
            "histogram": [
                {
                    "start": "0.00",
                    "end": "0.10",
                    "density": 0.9377813344003197
                },
                {
                    "start": "0.10",
                    "end": "0.25",
                    "density": 0.039611883565069506
                },
                {
                    "start": "0.25",
                    "density": 0.022606782034610366
                }
            ],
            "percentiles": {
                "p75": "0.01"
            }
        },
        "first_contentful_paint": {
            "histogram": [
                {
                    "start": 0,
                    "end": 1800,
                    "density": 0.9419767907162874
                },
                {
                    "start": 1800,
                    "end": 3000,
                    "density": 0.03741496598639458
                },
                {
                    "start": 3000,
                    "density": 0.02060824329731889
                }
            ],
            "percentiles": {
                "p75": 841
            }
        },
        "first_input_delay": {
            "histogram": [
                {
                    "start": 0,
                    "end": 100,
                    "density": 0.9863863863863849
                },
                {
                    "start": 100,
                    "end": 300,
                    "density": 0.008308308308308296
                },
                {
                    "start": 300,
                    "density": 0.0053053053053052955
                }
            ],
            "percentiles": {
                "p75": 5
            }
        },
        "largest_contentful_paint": {
            "histogram": [
                {
                    "start": 0,
                    "end": 2500,
                    "density": 0.9460068054443531
                },
                {
                    "start": 2500,
                    "end": 4000,
                    "density": 0.03467774219375491
                },
                {
                    "start": 4000,
                    "density": 0.019315452361889692
                }
            ],
            "percentiles": {
                "p75": 1135
            }
        }
    }
}

Answer 1

试试这个

  var result=[];

  Object.keys(data.metrics).forEach(function (key) {
     var obj={}
     obj.metric = key;
     obj.p75 = data.metrics[key].percentiles.p75
     result.push(obj);
  });

输出

[{"metric":"cumulative_layout_shift","p75":"0.01"},
{"metric":"first_contentful_paint","p75":841},
{"metric":"first_input_delay","p75":5},
{"metric":"largest_contentful_paint","p75":1135}]

从 JavaScript 中的 JSON 获取节点的未知子节点

Get unknown children of node from a JSON in JavaScript

javascript

foreach

json