Question posted in
You can find the official documentation here.

Recursively create a different id, for jquery into html table – Jquery ajax

I’m trying to correctly inject api’s data into a html table, with jquery.
What I’m missing, is the syntax to create recursively an id to a “tr” like that : 

<tr id=...></tr>

in order to inject a row of data.

This is the current code :

$( document ).ready(function() {
$.getJSON('https://official-joke-api.appspot.com/random_ten', function(i) { 
console.log(i);
let titre = i[0];
console.log(titre);

  $.each(titre, function (index, element) {
    let head = (`<th scope="col">${index}</th>`);
    $('#head').append(head);
  });

  $.each(i, function (index, element){
    let rangee = `<tr id="i"></tr>`;
    $('#table-body').append(rangee);
    $.each(element, function (key, value){
      let row = (`<tr>
        <td scope="col">${value}</td>
        </tr>`)

    $('#i').append(row);

    });
  });
  });
 });

The problem is at the line :

let rangee = `<tr id="i"></tr>`;

I don’t how to make the “i” detected as the number of the iteration…
Now, all my datas are in the first rank of my table.
I tried all sorts of weird syntax with variation of quotation marks, but nothings works for now…

Thank you for your help !

Tags:

2

Answers


  1. 0

    You can take help of index instead of i

    $( document ).ready(function() {
$.getJSON('https://official-joke-api.appspot.com/random_ten', function(i) { 
console.log(i);
let titre = i[0];
console.log(titre);

  $.each(titre, function (index, element) {
    let head = (`<th scope="col">${index}</th>`);
    $('#head').append(head);
  });

  $.each(i, function (index, element){
    let rangee = `<tr id="${index}"></tr>`;
    $('#table-body').append(rangee);
    $.each(element, function (key, value){
      let row = (`<tr>
        <td scope="col">${value}</td>
        </tr>`)

    $(`#${index}`).append(row);

    });
  });
  });
 });
    Login or Signup to reply.
  2. 0

    Ankit has provided the right answer.

    Here is a tidy version of the same answer

    function getJsonData(url) {
  return new Promise((resolve, reject) => {
    try {
      $.getJSON(url, function(result) {
        resolve(result);
      });
    } catch (error) {
      console.log(error);
      reject(error);
    }
  });
};

/*now suppose you want to get the JSON from the URL--->https://official-joke-api.appspot.com/random_ten. you will call the function as follows
 */

$(document).ready(async function() {
  const jsonResult = await getJsonData(
    'https://official-joke-api.appspot.com/random_ten'
  );
  console.log(jsonResult);
  $(jsonResult).each(function(index, element) {
    const head = `<th scope="col">${index}</th>`;
    $('#head').append(head);
  });

  $(jsonResult).each(function(index, element) {
    const rangee = `<tr id="${index}"></tr>`;
    $('#table-body').append(rangee);
    $.each(element, function(key, value) {
      const row = `<tr>
        <td scope="col">${value}</td>
        </tr>`;

      $(`#${index}`).append(row);
    });
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search