jQuery + создание таблицы из json

Question

У меня есть файл JSON

{
  "Scenario"    : "ModelNameHere",
  "id"          : "1",
  "description" : "Description of table model goes here",
  "headers"     : {
     "Column 1 header" : {
       "order"      : 1,
       "items"      : {
         "Row 1 Col 1 value" : {
           "id"         : 1,
           "comment"    : "Comment on Row 1 Col 1",
           "order"      : 1
         },
         "Row 2 Col 2 value" : {
           "id"         : 2,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     },
     "Column 2 header" : {
       "order"      : 2,
       "items"      : {
         "Row 1 Col 2 value" : {
           "id"         : 3,
           "comment"    : "Comment on Row 1 Col 2",
           "order"      : 1
         },
             "Row 2 Col 2 value" : {
           "id"         : 4,
           "comment"    : "Comment on Row 2 Col 2",
           "order"      : 2
         }
       }  
     }
  }
}

Я хочу использовать jQuery для помещения данных JSON в таблицу HTML.

Заголовки должны находиться внутри элементов TH td, элементы внутри заголовков должныбыть элементами в TD каждой связанной строки.

Есть ли в JS или jQuery функция для заполнения таблицы данными JSON?

Как бы я прошел цикл и сопоставил элементы JSON с таблицейэлементы?

Спасибо.

Answer 1

Посмотрите на этот плагин. Существует множество плагинов jQuery, поэтому выберите тот, который вам подходит. http://www.datatables.net Вот пример из json, за исключением того, что он загружается из txt файла, но это не проблема. http://www.datatables.net/examples/data_sources/ajax.html

И вот как я предлагаю вам реструктурировать свой JSON. По моему честному мнению, вы должны думать здесь с точки зрения таблиц, а не объектов.

{
    "model" : "Model name here",
    "id" : 1,
    "description" : "Description of table model goes here",
    "headers" : {
        "header" : {
            "id" : 1,
            "order" : 1,
            "name" : "Col 1 header name" 
        },
        "header" : {
            "id" : 2,
            "order" : 3,
            "name" : "Col 2 header name" 
        } 
    },
    "row1" : {
        "item" : {
            "id" : 1,
            "name" : "Some td data comes here" 
        },
        "item2" : {
                "id" : 4,
            "name" : "Some td data comes here" 
        } 
    },
    "row2" : {
        "item" : {
            "id" : 2,
            "name" : "Some td data comes here" 
        },
        "item2" : {
            "id" : 3,
            "name" : "Some td data comes here" 
        } 
    } 
}

Answer 2

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

Answer 3

Нет, такой функции не существует, так как она действительно специфична для конкретной ситуации.

Это довольно просто написать.
Вы можете получить доступ к JSON как к обычному объекту JS.
Этоозначает, что вы можете просто выполнить цикл и поместить информацию в правильные места.

Answer 4

если вы делаете в PHP, используйте json_decode('jsonstring',true); это будет как массив и легко манипулировать массив для создания HTML