извлекать данные в таблицу, используя javascript - PullRequest
Новая
       5

извлекать данные в таблицу, используя javascript

0 голосов
/ 07 апреля 2020

У меня есть таблица, заполненная данными (выборка из URL), и эти данные 

{
  "id": "145127236",
  "mygoals": "success",
  "future": "high",
  "dole": {
    "Key": "fhd699f"
  }
}

Под таблицей у меня есть поле выбора (данные также извлекаются из URL), его данные это 

[{
    "id": "1111",
    "mygoals": "getmarried",
    "future": "married",

  },
  {
    "id": "2222",
    "mygoals": "getmarried",
    "future": "married",

  },
  {
    "id": "33333",
    "mygoals": "getmarried",
    "future": "married",

  }
]

я хочу добиться того, чтобы, когда пользователь выбирает из поля выбора, таблица заполнялась указанными c данными, которые были выбраны, я начинаю с javascript обучения, это должно быть легкой задачей, не знаю, как это сделать, вот мой код 

 <!DOCTYPE html>
 <html lang="en">

   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
     <style>
     </style>
   </head>

   <body>
     <div class="container">
       <table class="table table-responsive-sm ">
         <thead>
           <tr>
             <th>id</th>
             <th>mygoals</th>
             <th>future</th>
           </tr>
         </thead>
         <tbody id="t">
         </tbody>
         <thead>
           <tr>
             <th>id</th>
             <th>mygoals</th>
             <th>future</th>
           </tr>
         </thead>
         <tbody id="t2">
         </tbody>
       </table>
       <select id="Select" name="name"></select>
     </div>
     <script>
       fetch("https://asdasd.free.beeceptor.com/a", {
         method: "GET",
         headers: {
           "x-api-key": "p*****w"
         }
       }).then(res => {
         res.json().then(t => {
           console.log(t);
           var p = "";
           var p2 = "";

           p += "<tr>";
           p += "<td>" + t.id + "</td>";
           p += "<td>" + t.mygoals + "</td>";
           p += "<td>" + t.future + "</td>";
           p2 += "<td>" + t.id + "</td>";
           p2 += "<td>" + t.mygoals + "</td>";
           p2 += "<td>" + t.future + "</td></tr>";

           document.getElementById("t").insertAdjacentHTML("beforeend", p);
           document.getElementById("t2").insertAdjacentHTML("beforeend", p2);
         })
       }).catch(err => {
         console.log("ERROR: " + err);
       });

       fetch("https:******.com/", {
         method: "GET",
         headers: {
           "x-api-key": "p*****w"
         }
       }).then(res => {
         res.json().then(t => {
           for (var i = 0; i < t.length; i++) {
             var s = document.getElementById("Select");
             var o = document.createElement("option");
             option.text = t[i].id + ' ' + t[i].mygoals;
             s.add(o);
           }
         })
       })

     </script>
   </body>

 </html>

1 Ответ

0 голосов
/ 07 апреля 2020

Чтобы не повторяться при обновлении таблицы, вы можете сделать функцию updateTable, которая получает данные из вашей выборки. Чтобы обновить таблицу с помощью выбора, вы можете использовать select.addEventListener('change', function(){updateTable(data)})

. Вот пример, который должен делать то, что вы ищете: 

// populate table with new data
function updateTable(data, values) {
  const tbody = document.getElementById("t");
  // clear existing data from tbody if it exists
  tbody.innerHTML = "";
  var p = "";
  p += "<tr>";
  values.forEach(value => {
      p += "<td>" + data[value] + "</td>";
  })

  tbody.insertAdjacentHTML("beforeend", p);
}

// populate select options
function updateSelect(data, values) {
  for (var i = 0; i < data.length; i++) {
    var s = document.getElementById("Select");
    var o = document.createElement("option");
    // add data to option
    values.forEach(value => {
        o.textContent += data[i][value] + ' '
    })
    s.appendChild(o);
  }
}

// fetch initial data and populate table
fetch("https://asdasd.free.beeceptor.com/a", {
  method: "GET",
  headers: {
    "x-api-key": "p*****w"
  }
}).then((res) => {
  res
    .json()
    .then((data) => {
      updateTable(data, ['id', 'mygoals', 'future']);
    })
    .catch((err) => {
      console.log("ERROR: " + err);
});

// fetch optional data and update select options

// define dataArray to store additional data you fetch later
let dataArray;

// fetch additional data
fetch("https:******.com/", {
  method: "GET",
  headers: {
    "x-api-key": "p*****w"
  }
}).then((res) => {
  res.json().then((data) => {
    // store additional data in dataArray
    dataArray = data;
    // update select options
    updateSelect(data, ['id', 'mygoals']);
  });

// add event listener to trigger when new data is selected
document.getElementById("Select").addEventListener("change", function (event) {
  // capture the ID
  const chosenID = event.target.value.split(" ")[0];

  // get the data matching that ID
  const chosenData = dataArray.filter((data) => data.id === chosenID)[0];

  // update table with newly selected data
  updateTable(chosenData, ['id', 'mygoals', 'future']);
});

updateTable() и updateSelect() работать так же, второй параметр представляет собой массив идентификаторов, которые вы хотели бы использовать. Это позволяет изменить отображаемые данные и / или порядок их отображения.

Дайте мне знать, если вам нужны пояснения

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

Похожие темы

...