时间戳

首页 > 解决方案 > Javascript 从 URL 获取数据

javascript - Javascript 从 URL 获取数据

问题描述

我想从 URL 获取数据。我已经可以阅读整个 URL，但我只想要一点点。如果您输入内容，请按 ENTER，然后单击“Click-Me Button”，它会显示数据。我只想要

synonyms(automobile,motor,machine). "synonyms": [
  "automobile",
  "motor",
  "machine"
]

我该如何过滤它？谢谢！

const tagContainerNodes = document.querySelectorAll(".tag-container");
tagContainerNodes.forEach((tagContainerNode) => {
  const input = tagContainerNode.querySelector("input");
  input.addEventListener("keyup", e => {
    if (e.key === "Enter") {
      createTag(e.target.value, tagContainerNode, input);
      e.target.value = "";
    }
  });
});

function createTag(tagName, parent, before) {
  var div = document.createElement("div");
  div.setAttribute("class", "tag");
  var span = document.createElement("span");
  span.innerHTML = tagName;
  div.appendChild(span);
  parent.insertBefore(div, before)
}

function clicked() {
  var word = document.getElementById("span_key").innerHTML;
  const allTagText = [];
  tagContainerNodes.forEach((tagContainerNode) => {
    const tagNodes = tagContainerNode.querySelectorAll(".tag");
    tagNodes.forEach((tagNode) => {
      allTagText.push(tagNode.textContent);
    });
  });
  console.log(allTagText);
  //      alert(allTagText);
  //      window.open("https://api.dictionaryapi.dev/api/v2/entries/en/"+allTagText);
  var req = new XMLHttpRequest();
  req.open("GET", "https://api.dictionaryapi.dev/api/v2/entries/en/" + allTagText, true);
  req.onreadystatechange = function(aEvt) {
    if (req.readyState == 4 && req.status == 200) {
      document.getElementById("test").value = req.responseText;
    }
  };
  req.send(null);
  // alert(test);
}
.container {
  width: 20%;
  margin: 40px;
  align-self: center;
}

.tag-container {
  border: 2px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  display: flex;
}

.tag-container .tag {
  padding: 5px;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  margin: 5px;
  border-radius: 3px;
  background: #f2f2f2;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
  cursor: default;
}

.tag i {
  font-size: 16px;
  margin-left: 5px;
}

.tag-container input {
  flex: 1;
  font-size: 16px;
  padding: 5px;
  outline: none;
  border: 0;
}
<textarea id="test" rows="8" cols="80"></textarea>


<div class="tag-container">
  <div id="span_tag">
    <span id="span_key" value=""></span>
    <i class="material-icons">close</i>
  </div>
  <input id="input_search" value="" />
</div>
<button type="button" id="bt" onclick="clicked()">Click Me!</button>

标签： javascript

解决方案

你的意思是

JSON.parse(req.responseText)[0].meanings[0].definitions[0].synonyms


let allTagText = "car";
var req = new XMLHttpRequest();
req.open("GET", "https://api.dictionaryapi.dev/api/v2/entries/en/" + allTagText, true);
req.onreadystatechange = function(aEvt) {
  if (req.readyState == 4 && req.status == 200) {
   document.getElementById("test").value = JSON.parse(req.responseText)[0].meanings[0].definitions[0].synonyms;
  }
};
req.send(null);
<textarea id="test"></textarea>

假设

[{
  "word": "car",
  "phonetics": [{
    "text": "/kɑr/",
    "audio": "https://lex-audio.useremarkable.com/mp3/car_us_1.mp3"
  }],
  "meanings": [{
    "partOfSpeech": "noun",
    "definitions": [{
      "definition": "A four-wheeled road vehicle that is powered by an engine and is able to carry a small number of people.",
      "example": "she drove up in a car",
      "synonyms": [
        "automobile",
        "motor",
        "machine"
      ]
    }]
  }]
}]

推荐阅读