Блог

Главная - Вопросы по программированию - используя javascript и json, создайте таблицу и используйте столбец фильтра

используя javascript и json, создайте таблицу и используйте столбец фильтра

#javascript #json #html

#javascript #json #HTML

Вопрос:

мне нужен этот вывод с использованием javascript и html, json.

 [
  {
    "name": "Tamil Mani",
    "year": 1,
    "gender": "m",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 98
      },
      {
        "sub": "English",
        "mark": 65
      },
      {
        "sub": "Maths",
        "mark": 88
      }
    ]
  },
  {
    "name": "Amuthan",
    "year": 1,
    "gender": "m",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 89
      },
      {
        "sub": "English",
        "mark": 79
      },
      {
        "sub": "Maths",
        "mark": 79
      }
    ]
  },
  {
    "name": "Mugilan",
    "year": 1,
    "gender": "m",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 97
      },
      {
        "sub": "English",
        "mark": 89
      },
      {
        "sub": "Maths",
        "mark": 99
      }
    ]
  },
  {
    "name": "Tamil Oviya",
    "year": 1,
    "gender": "f",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 89
      },
      {
        "sub": "English",
        "mark": 87
      },
      {
        "sub": "Maths",
        "mark": 97
      }
    ]
  },
  {
    "name": "Amutha",
    "year": 1,
    "gender": "f",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 89
      },
      {
        "sub": "English",
        "mark": 69
      },
      {
        "sub": "Maths",
        "mark": 79
      }
    ]
  },
  {
    "name": "Mugil Mathi",
    "year": 1,
    "gender": "f",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 97
      },
      {
        "sub": "English",
        "mark": 89
      },
      {
        "sub": "Maths",
        "mark": 99
      }
    ]
  }
]

это файл json.

Комментарии:

1. Что вы хотите сделать, используя файл JSON?

2. Задайте свой вопрос или сомнение в хороших словах.

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

Ответ №1:

Если у вас есть объект JSON, вы можете перебирать его, чтобы создать то, что вам нужно. Я не буду приводить ваш пример, а приведу упрощенный, чтобы вы могли учиться на практике, а не просто копировать и вставлять. Надеюсь, это поможет.

 var people = [
    {
        name: "Adam"
    },
    {
        name: "Betty"
    },
    {
        name: "Charles"
    }
];

var html = people.reduce((accum, person) => {
    return accum   `<tr><td>${person.name}</td></tr>`;
}, '<table>')   '</table>';

// or if you're used to imperitive...
var html = '<table>';
people.forEach(person => {
    html  = `<tr><td>${person.name}</td></tr>`;
});
html  = '</table>';