首頁(yè) 猿問(wèn) 讀取 json 文件數(shù)組中的數(shù)組

讀取 json 文件數(shù)組中的數(shù)組

JavaScript

慕虎7371278 2022-12-09 19:16:48

我正在構(gòu)建一個(gè)將數(shù)據(jù)從 JSON 文件輸出到表中的站點(diǎn)，但是我在獲取要輸出的內(nèi)容時(shí)遇到了問(wèn)題。這個(gè) JSON 文件是從另一個(gè)顯示文檔的站點(diǎn)生成的，而我的站點(diǎn)只是創(chuàng)建一個(gè)表格以便于搜索這些文檔。2 個(gè)文檔的示例 JSON： [{ "title": "SampleTitleA", "lang": "en-US", "lastEdition": "2020-07-28", "version": "1.0", "metadata": [ { "key": "sampleKeyA1", "label": "sampleLabelA1", "values": ["sampleValueA1"] }, { "key": "sampleKeyA2", "label": "sampleLabelA2", "values": ["sampleValueA2"] }] }, { "title": "SampleTitleB", "lang": "en-US", "lastEdition": "2020-07-28", "version": "1.0", "metadata": [ { "key": "sampleKeyB1", "label": "sampleLabelB1", "values": ["sampleValueB1"] }, { "key": "sampleKeyB2", "label": "sampleLabelB2", "values": ["sampleValueB2"] }] }]我為此使用 DataTables ( https://datatables.net/examples/ajax/deep.html ) 并嘗試按照它描述的去做。它并沒(méi)有真正涵蓋讀取數(shù)組中的數(shù)組。創(chuàng)建了一個(gè)表，但沒(méi)有填充，并且在控制臺(tái)中沒(méi)有顯示任何錯(cuò)誤。有沒(méi)有人為此目的使用數(shù)據(jù)表的經(jīng)驗(yàn)？

查看完整描述

2 回答

慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊

檢查這是否可以幫助您。

var data = {

"title": "SampleTitle",

"lang": "en-US",

"lastEdition": "2020-07-28",

"version": "1.0",

"metadata": [

{

"key": "sampleKey1",

"label": "sampleLabel1",

"values": ["sampleValue1"]

},

{

"key": "sampleKey2",

"label": "sampleLabel2",

"values": ["sampleValue2"]

}]

}

var result = { data: data.metadata[1].values[0], "defaultContent": "-" }

console.log(result);

反對(duì) 回復(fù) 2022-12-09

慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

您的 JSON 數(shù)據(jù)結(jié)構(gòu)是一個(gè)數(shù)組——所有內(nèi)容都包含在一個(gè)中[...]——因此 DataTables 可以遍歷該數(shù)組以生成其表行。

data這是一個(gè)示例，其中除了列定義（和列標(biāo)題）外，所有內(nèi)容都從您的代碼中刪除：

$(document).ready(function() {

$('#example').DataTable({

ajax: {

// my test URL:

url: 'http://localhost:7000/sample2',

dataSrc: ''

},

"columns": [

{ title: 'Title', data: 'title' },

{ title: 'Language', data: 'lang' },

{ title: 'Key', data: 'metadata[0].key' },

{ title: 'Label', data: 'metadata[0].label' },

{ title: 'First Value', data: 'metadata[0].values[0]' }

]

} );

</script>

這會(huì)生成一個(gè)如下所示的表：

這是如何運(yùn)作的？

默認(rèn)情況下，DataTables 期望 JSON 結(jié)構(gòu)為以下之一：

包含其他對(duì)象數(shù)組的對(duì)象：

{ "data": [ {...},{...},... ] }

包含數(shù)組數(shù)組的對(duì)象：

{ "data": [ [...],[...],... ] }

在這兩種情況下，數(shù)組都有一個(gè)名稱（在本例中為data）。

在您的情況下，如前所述，您的數(shù)據(jù)只是一個(gè)普通的對(duì)象數(shù)組：

[ {...}, {...},... ]

因?yàn)閿?shù)組沒(méi)有名稱，所以我們需要dataSrc: ''在 DataTable 定義中使用它來(lái)表示缺少名稱。

之后，您可以引用需要顯示的值，例如data: 'title'.

對(duì)于該metadata部分，它本身就是一個(gè)引用對(duì)象數(shù)組的標(biāo)簽：

"metadata": [ {...} ]

但是，在這種情況下，數(shù)組只包含一個(gè)對(duì)象。我們可以使用[0]- 引用元數(shù)據(jù)數(shù)組中的第一個(gè)對(duì)象，然后我們可以訪問(wèn)該對(duì)象中的值 - 例如，通過(guò)使用：data: 'metadata[0].label'。

反對(duì) 回復(fù) 2022-12-09