вывод данных в таблицу с помощью метода fetch()

Question

Начал пробовать учить js. Пытаюсь вывести инфу с файла info.json в таблицу

function GetInfo() {
    fetch('/api/info',{
        //url: "/api/info",
        method: "GET",
        headers: {
            "Content-Type": "application/json"
        },
        //contentType: "application/json",
        success: function (info) {
            let rows = "";
            $.each(info, function (index, inf) {
                // добавляем полученные элементы в таблицу
                rows += row(inf);
            });
            $("table tbody").append(rows);
        }
    }).then(response => response.json());
}

window.onload = () =>{
    GetInfo();
};

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, blog-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h2>Инфо</h2>
    <form name="infoForm">
        <input type="hidden" name="id" value="0" />
        <div class="form-group">
            <label for="name">Имя:</label>
            <input class="form-control" name="name" />
        </div>
        <div class="form-group">
            <label for="content">Содержимое:</label>
            <textarea class="form-control" name="content"></textarea>
        </div>
        <div class="panel-body">
            <button type="submit" class="btn btn-sm btn-primary">Сохранить</button>
            <a id="reset" class="btn btn-sm btn-primary">Сбросить</a>
        </div>
    </form>
    <table class="table table-condensed table-striped table-bordered">
        <thead><tr><th>Id</th><th>Имя</th><th>Контент</th><th></th></tr></thead>
        <tbody>
        </tbody>
    </table>

<script src="scripts.js"></script>
</body>
</html>

Но неудача, подскажите где ошибаюсь, уже перечитал и перепробовал массу вариантов - безуспешно

текст консоли

Answer 1

$.each(info, function (index, inf) {
            // добавляем полученные элементы в таблицу
            rows += row(inf);
        });

замени на

   $.each(info, function (key, value) {
                // добавляем полученные элементы в таблицу
                rows += value;
            });

Answer 2

Пытаюсь вывести инфу с файла info.json в таблицу

Такое можно реализовать вот таким образом...

//
function GetInfo() {
  fetch('http://jsonplaceholder.typicode.com/users')
    .then(r => r.json())
    .then(a => {
      a.forEach(({id, name, phone}) => {
        const v = `<td>${id}</td><td>${name}</td><td>${phone}</td>`
        test.insertAdjacentHTML('beforeend', v)
      })
    })
    .catch(console.log)
}
window.addEventListener('load', GetInfo)

<table id='test'>
  <thead>
    <tr>
      <th>Id</th><th>Имя</th><th>Контент</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

БЛОГ НА HUSL

вывод данных в таблицу с помощью метода fetch()

Ответы (2 шт):