Как сделать строку в формате JSON, которую AJAX получает в виде таблицы - PullRequest
Новая
       2

Как сделать строку в формате JSON, которую AJAX получает в виде таблицы

0 голосов
/ 25 марта 2019

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

[{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}]

Вот как данные анализируются, когда я использовал код из W3SCHOOLS, но адаптировал его к моей ситуации Я использовал команду JSON stringify, чтобы также изменить ее на строку. https://www.w3schools.com/js/js_json_php.asp Основываясь на данных выше, которые были получены с помощью кода AJAX, у меня возникли проблемы при создании таблицы на основе этих результатов.

Ответы [ 4 ]

0 голосов
/ 25 марта 2019

Я просто привожу живой пример вашей помощи, вы можете изменить его в соответствии с вашими требованиями.На самом деле, я думаю, это быстрый способ помочь кому-то.Я использую поддельный REST-сервис, доступный по https://jsonplaceholder.typicode.com/posts/.

. У меня он уже есть на странице по адресу https://hygull.github.io/pages/animations/ajax_data_fetch.html.. Если вы хотите, вы можете проверить и увидеть код в теле внутри * 1007.* & </script>.Это именно то, что вы хотите.Требуется лишь небольшое изменение, используйте source, name, amount вместо id, title, body и т. Д. Также измените URL запроса.

Вот пример, который вы можете изменить и запустить на https://www.w3schools.com/code/tryit.asp?filename=G2FBIOPTDIQ6.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>POSTS EXAMPLE - RENDER RESPONSE FROM FAKE REST API</h2>
<a href="https://jsonplaceholder.typicode.com/posts/">https://jsonplaceholder.typicode.com/posts/</a>
<hr>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </thead>

  <!-- TABLE BODY -->
  <tbody id="tbody">
  </tbody>
</table>
</div>

<script>
function setTable(){
    xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
            posts = JSON.parse(this.responseText)

            var postsText=""

            for (var i=0; i < posts.length; i++){
                postsText += "<tr>" + "<td>" + posts[i].id + "</td><td>" + posts[i].title + "</td><td>" + posts[i].body + "</td></tr>";
            }

            document.getElementById("tbody").innerHTML = postsText;
        }
    };
    xhttp.open("GET", "https://jsonplaceholder.typicode.com/posts/", true);
    xhttp.send();
}

setTable(); 
</script>
</body>
</html>
0 голосов
/ 25 марта 2019

Если вы хотите, чтобы ваш myObj был в формате, подобном таблице, то нет ничего, что автоматически конвертирует из объекта в формат таблицы, встроенный в html / javascript.

Вы можете использовать некоторые библиотеки, чтобы сделать это,но для чего-то простого ниже может быть начало для вас. 

const myObj = [{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}];

const tbody = document.querySelector("tbody");

myObj.forEach(r => {
  const tr = document.createElement("tr"); 
  ["source", "name", "amount"].forEach(f => {
    const td = document.createElement("td");
    td.innerText = r[f];
    tr.appendChild(td);
  });
  tbody.appendChild(tr);
});
<table border="1">
  <thead>
    <th>Source</th>
    <th>Name</th>
    <th>Amount</th>
  </thead>
  <tbody>
  </tbody>
</table>
0 голосов
/ 25 марта 2019

Проблема в том, что JSON.stringify не создает таблицу.Создает строку json объекта.вам нужно создать таблицу самостоятельно, добавив элементы tr в тег table или tbody следующим образом: 

const json = JSON.parse('[{"source":"1","name":"random","amount":"5"},{"source":"1","name":"random","amount":"5"}]');

// querySelector is used to find an html element
// '#' means to search for an id so
// '#myTable' means to search to an element with the id 'myTable'
const tbody = document.querySelector('#myTable');

for (let i = 0; i < json.length; i++) {
  // First we need to create the td elements.
  const source = document.createElement('td');
  source.innerText = json[i]['source'];
  const name = document.createElement('td');
  name.innerText = json[i]['name'];
  const amount = document.createElement('td');
  amount.innerText = json[i]['amount'];
  
  //Then we need to create a tr to containt the tds
  const tr = document.createElement('tr');
  tr.appendChild(source);
  tr.appendChild(name);
  tr.appendChild(amount);
  
  //Finaly we need to add our tr to our tbody.
  tbody.appendChild(tr);
}
<table>
  <thead>
    <th>source</th>
    <th>name</th>
    <th>amount</th>
  </thead>
  <tbody id="myTable">
    <!-- the id is used to later refer to this tbody. -->
  </tbody>
</table>
0 голосов
/ 25 марта 2019

Возможно, вы захотите использовать некоторые библиотеки переднего плана для создания таблицы, такой как jquery DataTables или написать свою собственную реализацию на чистом JavaScript, если вам нужно что-то более простое.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...