-1

I just want to display the dt property however I get undefined in my console.

This is an example of the json data when I search toothbrush

[
  {
    "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"
    ]
  }
]

This is my code

<!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`
Kanishk Anand
  • 1,686
  • 1
  • 7
  • 16
Si W
  • 1
  • 2

1 Answers1

1

Your json reading code:

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

Should be:

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

enter image description here


A detailed explanation of my code:

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

Generally, whenever there are numbers/ints as a key to the values in a attribute, It is a Array/List, you cannot access values inside that attribute using . but if they have string as a key to the values, the values can be accessed using . since the parent node is a MAP

You should try opening the api in a new tab on your browser and see the response it gives, you can analyse it and get the path to the required data easily using this method. You can also add extensions for reading JSON in your browser that make it easier to get the path to a node if the data is very large

Joel
  • 239
  • 3
  • 21
  • OK thank you so much... it is much clearer now – Si W Dec 13 '21 at 06:53
  • I have edited the answer, please check the code again, my bad thot u wanted the value with sense, edited the code to point towards the dt node @SiW – Joel Dec 13 '21 at 06:54
  • I'm also having trouble with getting the art id for heart. "art": { "artid": "heart", "capt": "heart 1a: {it}1{/it} aorta, {it}2{/it} pulmonary artery, {it}3{/it} left atrium, {it}4{/it} left ventricle, {it}5{/it} right ventricle, {it}6{/it} right atrium" }, – Si W Dec 13 '21 at 08:15
  • According to your structure, art is a MAP, with various attributes, artid is one of those attributes. Just get the art node, and then get the artid attribute of it. let's call attributes attrs from now on, just short for it – Joel Dec 13 '21 at 09:23
  • i'd suggest to watch this [tutorial](https://www.youtube.com/watch?v=iiADhChRriM), you'll get a idea about JSON structures. And as a developer, I feel JSON is just a copy of MAPS, nothing else. JSON is universally used to give and get data between different software. Hence, understanding it is very important. – Joel Dec 13 '21 at 09:27