Добавление данных JSON в таблицу Html

У меня есть данные json, и у меня есть таблица html, я хочу добавить данные json в таблицу вот как я пытаюсь получить данные json, я использую append для добавления данных таблицы, так как я новичок в синтаксическом анализе json, я старался изо всех сил, может ли кто-нибудь помочь ...

<!DOCTYPE html>
<html>

<head>
    <title>JSON Demo</title>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function StudentDetails() {
            var stu = [{
                    "stuname": "anbu",
                    "studep": "cs"
                },
                {
                    "stuname": "raj",
                    "studep": "Maths"
                },
                {
                    "stuname": "mani",
                    "studep": "science"
                }
            ]

            var tr = "";
            for (var i = 0; i < stu.length; i++) {

                tr = $('<tr/>');
                tr.append("<td>" + stu.stuname + "</td>");
                tr.append("<td>" + stu.studep + "</td>");
                $('#student').append(tr);

            }
        }
    </script>
</head>

<body>
    <input type = "button" onClick = "StudentDetails()" value = "Student Table" />
    <div>
        <table id = "student">
            <thead>
                <tr>
                    <th>Student Name</th>
                    <th>Student Department</th>
                </tr>
                <thead>
                    <tbody></tbody>
        </table>
    </div>

    <div id = "showData"></div>
</body>

</html>

javascript html json

15.06.2018 08:17

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Добавить индекс массива в stu

tr.append("<td>" + stu[i].stuname + "</td>");
tr.append("<td>" + stu[i].studep + "</td>");

15.06.2018 08:20

Попробуй это:

tr.append("<td>" + stu[i]['stuname'] + "</td>");

15.06.2018 08:20

Измените свой код вот так

for (var i = 0; i < stu.length; i++) {
        var tr = $("<tr>");

        tr.append("<td>" + stu[i].stuname + "</td>" + "<td>" + stu[i].studep + "</td>")

        $("#student tbody").append(tr);
      }
    }

<!DOCTYPE html>
<html>

<head>

  <title>JSON Demo</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <input type = "button" onClick = "StudentDetails()" value = "Student Table" />
  <div>
    <table id = "student">
      <thead>
        <tr>
          <th>Student Name</th>
          <th>Student Department</th>
        </tr>
        <thead>
          <tbody></tbody>
    </table>
  </div>


  <div id = "showData"></div>
  <script>
    function StudentDetails() {
      var stu = [{
          "stuname": "anbu",
          "studep": "cs"
        },
        {
          "stuname": "raj",
          "studep": "Maths"
        },
        {
          "stuname": "mani",
          "studep": "science"
        }
      ]



      for (var i = 0; i < stu.length; i++) {
        var tr = $("<tr>");

        tr.append("<td>" + stu[i].stuname + "</td>" + "<td>" + stu[i].studep + "</td>")

        $("#student tbody").append(tr);
      }
    }
  </script>

</body>


</html>

15.06.2018 08:31

Другие вопросы по теме

Как показать текстовое поле в html, объявленном в JavaScript

Как уменьшить строку, добавив точки в указанном диапазоне

Невозможно сделать все содержимое div доступным только для чтения по умолчанию и включить редактирование при нажатии кнопки редактирования

Создавать миксины в файлах Sass

Тег PRE в начальной загрузке не отображает весь код

Как сжать размер изображения на стороне клиента Angularjs?

Данные, полученные из базы данных, отображаются некорректно

Я не получаю событие onchange для input type = "datetime-local" в jquery или javascript

Как переключить подменю с помощью EventListener только javascript без jquery?

Текст выделенного элемента в списке будет обрезан

Добавление данных JSON в таблицу Html

Ответы 3

Другие вопросы по теме

Похожие вопросы