复杂的嵌套 JSON - 为什么数据未定义 [重复]答案

【问题标题】：complex nested JSON - why is the data undefined [duplicate]复杂的嵌套 JSON - 为什么数据未定义 [重复]
【发布时间】：2022-01-16 16:12:35
【问题描述】：

我只想显示dt 属性，但我在控制台中得到undefined。

这是我搜索牙刷时的json数据示例

[
  {
    "meta": {
      "id": "toothbrush",
      "uuid": "b778955b-4d66-4082-84d3-14d5cd81f02c",
      "sort": "200277700",
      "src": "collegiate",
      "section": "alpha",
      "stems": [
        "toothbrush",
        "toothbrushes"
      ],
      "offensive": false
    },
    "hwi": {
      "hw": "tooth*brush",
      "prs": [
        {
          "mw": "\u02c8t\u00fcth-\u02ccbr\u0259sh",
          "sound": {
            "audio": "toothb01",
            "ref": "c",
            "stat": "1"
          }
        }
      ]
    },
    "fl": "noun",
    "def": [
      {
        "sseq": [
          [
            [
              "sense",
              {
                "dt": [
                  [
                    "text",
                    "{bc}a brush for cleaning the teeth"
                  ]
                ]
              }
            ]
          ]
        ]
      }
    ],
    "date": "1690",
    "shortdef": [
      "a brush for cleaning the teeth"
    ]
  }
]

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .header {
    overflow: hidden;
    background-color: rgb(245, 244, 244);
    padding: 20px 10px;
  }
  
  /* Style the header links */
  .header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px; 
    line-height: 25px;
    border-radius: 4px;
  }
  
  /* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
  .header a.logo {
    font-size: 25px;
    font-weight: bold;
  }
  
  /* Change the background color on mouse-over */
  .header a:hover {
    background-color: rgb(245, 244, 244);
    color: black;
  }
  
  /* Style the active/current link*/
  .header a.active {
    background-color: dodgerblue;
    color: white;
  }
  
  /* Float the link section to the right */
  .header-right {
    float: right;
  }
  
  /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */ 
  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
    }
    .header-right {
      float: none;
    }
    .div{
      width: 80px;
      height: 80px;

    }
  }
  </style>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  
  <title>My Dictionary</title>
</head>

<body>
  <div class="header">
    <a href="#default" class="logo">
      <div><img src="https://www.nicepng.com/png/detail/793-7936442_book-logo-png-books-logo-black-png.png" alt="A book"style="width: 80px;px;height: 80px;px;"></div><h1>DictVerse</h1>
    </a>
    <div class="header-right">
      <a class="active" href="#home">Home</a>
      <a href="#Dictionary">Dictionary</a>
    </div>
  </div>
  <h4 >Welcome <%=name%></h4>
  <div>
    <form action="/login?_method=DELETE" method="POST">
      <button type="submit">Log Out</button>
    </form>
  </div> 
  <input id="in">
  <button onclick="defineIt()"defineIt>Search</button>
  <div id="out"></div>
  <p id="demo"></p>
  <script>
  async function getData(){
      
    
    const api_url = 'https://dictionaryapi.com/api/v3/references/collegiate/json/toothbrush?key=4502863e-a238-4f32-b67a-df35b17b2cce'
    
    const response = await fetch(api_url);
      const data = await response.json();

      
      


var obj = { "name":"John", "age":30, "city":"New York"};

var myJSON = (data);
var myJSON = JSON.stringify(data[0].def[0].sseq[0].sense);
document.getElementById("demo").innerHTML = myJSON;




 
      
      console.log(myJSON);

      

    
    
    
    }
 getData();

    
  </script>
  
</body>
</html>`enter code here`

【问题讨论】：

您能否显示从 API 数据中获取单个值的代码
我添加了我的代码

标签： javascript ejs

【解决方案1】：

你的json读取代码：

var myJSON = JSON.stringify(data[0].def[0].sseq[0].sense);

应该是：

var myJSON = JSON.stringify(data[0].def[0].sseq[0][0][1].dt);

我的代码的详细解释：

var myJSON = (data);
var myJSON = JSON.stringify(data[0]);//Get the 0th element of the JSON
var myJSONdefAttr = myJSON.def //Get the def attribute of the JSON
var myJson_def_sseq_attr = myJSONdefAttr[0].sseq//Get the sseq attribute from the 0th element of the def attribute of the JSON
var myNeededData = myJson_def_sseq_attr[0][0][1].dt//Get the dt node

通常，只要有数字/整数作为属性中值的键，它是一个数组/列表，你不能使用 .但如果他们将字符串作为值的键，则可以使用 .因为父节点是一个MAP

您应该尝试在浏览器的新选项卡中打开 api 并查看它给出的响应，您可以使用此方法对其进行分析并轻松获取所需数据的路径。您还可以在浏览器中添加用于读取 JSON 的扩展，以便在数据非常大时更轻松地获取节点的路径

【讨论】：

好的，非常感谢……现在清楚多了
我已经编辑了答案，请再次检查代码，我的错误是你想要有意义的值，编辑代码指向 dt 节点@SiW
我在获取 heart 的 art id 时也遇到了麻烦。 "art": { "artid": "heart", "capt": "heart 1a: {it}1{/it} 主动脉，{it}2{/it} 肺动脉，{it}3{/it}左心房，{it}4{/it} 左心室，{it}5{/it} 右心室，{it}6{/it} 右心房" },
根据您的结构，art 是一个 MAP，具有各种属性，artid 是其中一个属性。只需获取art节点，然后获取它的artid属性即可。从现在开始，我们将属性称为 attrs，简称它
我建议您观看tutorial，您将了解 JSON 结构。而作为一名开发人员，我觉得 JSON 只是 MAPS 的一个副本，仅此而已。 JSON 普遍用于在不同软件之间提供和获取数据。因此，理解它非常重要。