使用未知鍵遍歷 Javascript 中的 JSON Object

Question

作為 API 的結果，我得到一個 JSON 字符串，如下所示：

{
    "batchcomplete": "",
    "query": {
        "pages": {
            "682482": {
                "pageid": 682482,
                "ns": 0,
                "title": "Human",
                "thumbnail": {
                    "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Akha_cropped_hires.JPG/119px-Akha_cropped_hires.JPG",
                    "width": 119,
                    "height": 200
                },
                "extract": "Humans (Homo sapiens) are a species of highly intelligent primates. They are the only extant members of the subtribe Hominina and—together with chimpanzees, gorillas, and orangutans—are part of the family Hominidae (the great apes, or hominids). Humans are terrestrial animals, characterized by their erect posture and bipedal locomotion; high manual..."
            }
        }
    }
}

目標
我永遠不知道 pageid 是什么，我需要檢索extract和thumbnail 。 提取應該是字符串，縮略圖應該是 Object。

如果不是隨機的pageid，那將不是什么大問題。

我試過的

const thumbnail = jsonObj.query[0].thumbnail;
const extract = jsonObj.query[0].extract;

預期結果

thumbnail = {
              "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Akha_cropped_hires.JPG/119px-Akha_cropped_hires.JPG",
              "width": 119,
              "height": 200
            }

extract = "Humans (Homo sapiens) are a species of highly intelligent primates. They are the only extant members of the subtribe Hominina and—together with chimpanzees, gorillas, and orangutans—are part of the family Hominidae (the great apes, or hominids). Humans are terrestrial animals, characterized by their erect posture and bipedal locomotion; high manual...";

Answer 1

這有點小技巧，但如果你知道總是只有一個 pageid（或者如果你總是想要第一個），你可以使用Object.values ：

const page = Object.values(t.query.pages)[0];
console.log(page.thumbnail, page.extract);

Answer 2

Object.keys function 返回一個數組，其中包含給定 object 中的所有鍵。 然后您可以使用返回的數組來使用 object 的任何鍵來訪問某些值。

所以你可以做這樣的事情：

 const partialObj = { '682482': 'Value' }; const keys = Object.keys(partialObj); console.log(keys); // Then you can access the value with the "unknown" key: console.log(partialObj[keys[0]]); //=> Value

在您的具體情況下：

 const jsonObj = { "batchcomplete": "", "query": { "pages": { "682482": { "pageid": 682482, "ns": 0, "title": "Human", "thumbnail": { "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Akha_cropped_hires.JPG/119px-Akha_cropped_hires.JPG", "width": 119, "height": 200 }, "extract": "Humans (Homo sapiens) are a species of highly intelligent primates. They are the only extant members of the subtribe Hominina and—together with chimpanzees, gorillas, and orangutans—are part of the family Hominidae (the great apes, or hominids). Humans are terrestrial animals, characterized by their erect posture and bipedal locomotion; high manual..." } } } }; const unknownKeys = Object.keys(jsonObj.query.pages); const unknownKey = unknownKeys[0]; // We are only using one key. const thumbnail = jsonObj.query.pages[unknownKey].thumbnail; console.log(thumbnail);

請注意，某些對象可能有多個鍵。 在前面的示例中，只使用了一個鍵（第一個Object.keys返回）。 Object.keys function 也不保證返回的鍵數組中的任何特定順序。

如果您不關心密鑰（只關心值），您可以使用Object.values function。

Answer 3

例如Object.values和object 解構賦值的組合將完成這項工作。

 const sample = { "batchcomplete": "", "query": { "pages": { "682482": { "pageid": 682482, "ns": 0, "title": "Human", "thumbnail": { "source": "https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Akha_cropped_hires.JPG/119px-Akha_cropped_hires.JPG", "width": 119, "height": 200 } } } } } const { pageid, thumbnail, } = Object.values(sample.query.pages)[0]; console.log(pageid); console.log(thumbnail);

 .as-console-wrapper { min-height: 100%;important: top; 0; }

Answer 4

這是使用對象掃描的迭代解決方案

優點是更容易維護（例如，如果響應結構發生變化，則針對不同的鍵）

 // const objectScan = require('object-scan'); const myData = { batchcomplete: '', query: { pages: { 682482: { pageid: 682482, ns: 0, title: 'Human', thumbnail: { source: '...url...', width: 119, height: 200 }, extract: '...text...' } } } }; const extract = (data) => objectScan(['query.pages.*.{thumbnail,extract}'], { filterFn: ({ property, value, context }) => { context[property] = value; } })(data, {}); console.log(extract(myData)); /* => { extract: '...text...', thumbnail: { source: '...url...', width: 119, height: 200 } } */

 .as-console-wrapper {max-height: 100%;important: top: 0}

 <script src="https://bundle.run/object-scan@14.0.0"></script>

免責聲明：我是對象掃描的作者