使用 Flatlist 响应 API 中的本机显示嵌套数组项

Question

我正在尝试从 API 获取并显示数据。我想显示“日期”和“模块”数组中“时间戳”的值。请帮我解决这个问题

[
    {
            "id": 8,
            "name": "Topic 1",
            "modules": [
                {
                    "id": 3,
                    "name": "Tugas 1",
                    "dates": [
                        {
                            "label": "Due:",
                            "timestamp": 1650301200
                        }
                    ]
                }
            ]
        },
        {
            "id": 9,
            "name": "Topic 2",
            "modules": [
                {
                    "id": 4,
                    "dates": [
                        {
                            "label": "Opened:",
                            "timestamp": 1649696400
                        },
                        {
                            "label": "Due:",
                            "timestamp": 1651165200
                        }
                    ]
                }
            ]
        }
 ]

Answer 1

您好，欢迎来到堆栈溢出。我美化了你的结果。我不太确定这个代码，但试试这个。

console.log(res.data[0].modules[0].date[0].timestamp) 

    [{
  "id": 8,
  "name": "Topic 1",
  "visible": 1,
  "summary": "",
  "summaryformat": 1,
  "section": 1,
  "hiddenbynumsections": 0,
  "uservisible": true,
  "modules": [{
    "id": 3,
    "url": "https://angkasa.rg.telkomuniversity.ac.id/pedagogical/mod/assign/view.php?id=3",
    "name": "Tugas 1",
    "instance": 1,
    "contextid": 49,
    "visible": 1,
    "uservisible": true,
    "visibleoncoursepage": 1,
    "modicon": "https://angkasa.rg.telkomuniversity.ac.id/pedagogical/theme/image.php/boost/assign/1649055720/icon",
    "modname": "assign",
    "modplural": "Assignments",
    "indent": 0,
    "onclick": "",
    "afterlink": null,
    "customdata": "{"
    duedate ":1650301200}",
    "noviewlink": false,
    "completion": 1,
    "completiondata": {
      "state": 1,
      "timecompleted": 1649746942,
      "overrideby": null,
      "valueused": false,
      "hascompletion": true,
      "isautomatic": false,
      "istrackeduser": true,
      "uservisible": true,
      "details": []
    },
    "dates": [{
      "label": "Due:",
      "timestamp": 1650301200
    }]
  }]
},
}]

Answer 2

data.forEach((e) => {
  e.modules.forEach((module) => {
    module.dates.forEach((date) => {
      console.log(date.timestamp)
    })
  })
})

使用 Flatlist 响应 API 中的本机显示嵌套数组项

React Native Display Nested Array Items from API using Flatlist

react-native