Неуверенный в обещании

Question

Итак, я довольно новичок в JavaScript, у меня был текстовый документ, полный существительных, и я подумал, что это хороший способ создать API с этими существительными.

Я прочитал файл и добавил их в список

public List<Noun> getData() throws IOException {
    Scanner sc = new Scanner(new 
    File("C:\\Users\\Admin\\Desktop\\nounlist.txt"));
    List<Noun> nouns = new ArrayList();
    while (sc.hasNextLine()) {
        nouns.add(new Noun(sc.nextLine()));
    }
    return nouns;
}

Этот список я преобразовал в Json с Gson:

@GET
@Path("/nouns/amount=all")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public Response getAllNouns() throws IOException {      
    return Response.ok().entity(gson.toJson(nf.getData())).build();
}

Затем я начал создавать свой веб-интерфейс с помощью js и попытался извлечь данные, но столкнулся с проблемой, в которой говорится об отсутствии ответа в обещании, ошибке типа, nouns.forEach - не функция

import "bootstrap/dist/css/bootstrap.css";

const root = document.getElementById("root");
var url = "http://localhost:8084/CORSJavaJax-rs/api/noun/nouns/amount=all";
var tbody = document.getElementById("tbody");
var btn = document.getElementById("btnsend");

// fetch(url)
//   .then(res => res.json)
//   .then(nouns => {
//     var n = nouns.map(noun => {
//       return "<tr>" + "<td>" + noun.name + "</td>" + "</tr>";
//     });
//     tbody.innerHTML = n.join("");
//   });

btn.addEventListener("click", function() {
  fetch(url)
    .then(res => res.json)
    .then(nouns => {
      console.log(nouns);
      var n = nouns.forEach(noun => {
        return "<tr>" + "<td>" + noun.name + "</td>" + "</tr>";
      });
      tbody.innerHTML = n.join("");
    });
});

Я пробовал и с картой, и с forEach, но безуспешно, возможно, я что-то упустил или есть что-то, чего я просто не понимаю, почему я не могу отобразить данные.

Answer 1

Для того, что вы хотите, правильным использованием будет вызов map, а не forEach.ForEach не возвращает значение, он просто перебирает коллекцию.

Причина, по которой вы получаете ошибку is not a function, наиболее вероятна из-за отсутствия вызова функции в res.json.Это должно быть res.json().

btn.addEventListener("click", function() {
  fetch(url)
    .then(res => res.json())
    .then(nouns => {
      console.log(nouns);
      var n = nouns.map(noun => {
        return "<tr>" + "<td>" + noun.name + "</td>" + "</tr>";
      });
      tbody.innerHTML = n.join("");
    });
});