Данные JSON в таблицу HTML с помощью JQUERY ⇐ Jquery
-
Anonymous
Данные JSON в таблицу HTML с помощью JQUERY
Кто-нибудь знает, как я могу отправить все значения объекта «Пользователь» в моем файле JS (например, «Пользователь 1») в заголовок моей таблицы HTML?
Я помещу только один столбец, структурированный данными JSON, но мне нужно, чтобы код помещал все мои данные JSON в html-файл, как показано в следующей структуре:
Имя Роль Возраст skillsTable2 biopicURL Усуарио 1 Веб-разработчик 28 SEO ../images/fry.jpg Вот мой JS-код:
// Структура метаданных JSON // varskillsTable = ["SEO","Внешняя разработка","Рассказывание историй"]; var MetadataContext = {"Контекст": { "itemscope":"itemscope", "itemtype":"http://schema.org/VisualArtwork" } }; вар dataX = { "Пользователь 1":[{ «Имя»: «Усуарио 1», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 2":[{ «Имя»: «Усуарио 2», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 3":[{ «Имя»: «Усуарио 3», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 4":[{ «Имя»: «Усуарио 4», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, "Приветственное сообщение" : «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 5":[{ «Имя»: «Усуарио 5», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 6":[{ «Имя»: «Усуарио 6», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 7":[{ «Имя»: «Усуарио 7», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 8":[{ «Имя»: «Усуарио 8», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }] }; // Переменные метаданных // вар itemscopeVar = 'itemscope'; var itemtypeVar =' itemtype='; вар itempropVar = 'itemprop ='; // Переменная структурирования таблицы // var tableTagVar = '%Inside%'; var theadVar = ''; var tbodyVar = '%trColumnsContent%'; var tdHeaderVar = '%tdDataHeader%'; var tdColumnsVar = '%tdDataColumns%'; // Печать таблицы + метаданные // функция myFunction() { var formatTableTagVar = tableTagVar.replace('%metadataL0%', itemscopeVar + itemtypeVar + "'" + MetadataContext.Context.itemtype + "'" ); var formatTheadVar = theadVar.replace("%metadataL1%", itemscopeVar + itemtypeVar + "'" + MetadataContext.Context.itemtype + "'" ); //var formattbodyVarVar = tbodyVar.replace("%metadataL2%", itemscopeVar + itemtypeVar + "'" + MetadataContext.Context.itemtype + "'" ); var formatTableTagVarIn = formatTableTagVar.replace("%Inside%", formatTheadVar ); var tableInit = $('#tableBox').append(formatTableTagVarIn); вар SwitcherTable = 0; если (таблица переключателей
Кто-нибудь знает, как я могу отправить все значения объекта «Пользователь» в моем файле JS (например, «Пользователь 1») в заголовок моей таблицы HTML?
Я помещу только один столбец, структурированный данными JSON, но мне нужно, чтобы код помещал все мои данные JSON в html-файл, как показано в следующей структуре:
Имя Роль Возраст skillsTable2 biopicURL Усуарио 1 Веб-разработчик 28 SEO ../images/fry.jpg Вот мой JS-код:
// Структура метаданных JSON // varskillsTable = ["SEO","Внешняя разработка","Рассказывание историй"]; var MetadataContext = {"Контекст": { "itemscope":"itemscope", "itemtype":"http://schema.org/VisualArtwork" } }; вар dataX = { "Пользователь 1":[{ «Имя»: «Усуарио 1», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 2":[{ «Имя»: «Усуарио 2», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 3":[{ «Имя»: «Усуарио 3», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 4":[{ «Имя»: «Усуарио 4», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, "Приветственное сообщение" : «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 5":[{ «Имя»: «Усуарио 5», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 6":[{ «Имя»: «Усуарио 6», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 7":[{ «Имя»: «Усуарио 7», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }], "Пользователь 8":[{ «Имя»: «Усуарио 8», «Роль»: «Веб-разработчик», "Контакты" : { «Мобильный»: «999 99 9999 9999», «Электронная почта»: «test-email@example.com», "GitHub": "https://github.com/exampleuser", "Facebook": "https://www.facebook.com/profile.php?id=999999999999999", «Местоположение»: «В каком-то месте». }, «Приветственное сообщение»: «Только не останавливайся», «Возраст»: 29, "skillsTable" : таблица навыков, "skillsTable2" : ["SEO", "Внешняя разработка", "Рассказ историй"], "bioPicURL" : "../images/fry.jpg" }] }; // Переменные метаданных // вар itemscopeVar = 'itemscope'; var itemtypeVar =' itemtype='; вар itempropVar = 'itemprop ='; // Переменная структурирования таблицы // var tableTagVar = '%Inside%'; var theadVar = ''; var tbodyVar = '%trColumnsContent%'; var tdHeaderVar = '%tdDataHeader%'; var tdColumnsVar = '%tdDataColumns%'; // Печать таблицы + метаданные // функция myFunction() { var formatTableTagVar = tableTagVar.replace('%metadataL0%', itemscopeVar + itemtypeVar + "'" + MetadataContext.Context.itemtype + "'" ); var formatTheadVar = theadVar.replace("%metadataL1%", itemscopeVar + itemtypeVar + "'" + MetadataContext.Context.itemtype + "'" ); //var formattbodyVarVar = tbodyVar.replace("%metadataL2%", itemscopeVar + itemtypeVar + "'" + MetadataContext.Context.itemtype + "'" ); var formatTableTagVarIn = formatTableTagVar.replace("%Inside%", formatTheadVar ); var tableInit = $('#tableBox').append(formatTableTagVarIn); вар SwitcherTable = 0; если (таблица переключателей
Мобильная версия