Как вставить json объекты в таблицу?

Question

[Osklizg]

C БД приходит в виде строки String json :

{"tables": [{"Ext_TeleserviceCode":"11","Ellipsis":"","NACarrierID":"","CallingPartyNumber":"93967767","CamelBusy":"","GSM_ForwardingPending":"","EventTypeBCSM0":"C0"},
{"Ext_TeleserviceCode":"12","Ellipsis":"","NACarrierID":"","CallingPartyNumber":"93939643","CamelBusy":"","GSM_ForwardingPending":"","EventTypeBCSM0":"C0"}]}

Потом у меня получается вытащить каждый json объект по отдельности. Мне нужно нарисовать таблицу на веб интерфейсе, куда бы складывались все эти значения.
Поискал примеры, везде фигурирует JavaScript. Пример типа:

function CreateTableFromJSON() {
        var myBooks = [
            {
                "Book ID": "1",
                "Book Name": "Computer Architecture",
                "Category": "Computers",
                "Price": "125.60"
            },
            {
                "Book ID": "2",
                "Book Name": "Asp.Net 4 Blue Book",
                "Category": "Programming",
                "Price": "56.00"
            },
            {
                "Book ID": "3",
                "Book Name": "Popular Science",
                "Category": "Science",
                "Price": "210.40"
            }
        ]

Но у меня все эти значения хранятся в одной переменной.
Подскажите пожалуйста, возможно ли какими то способами засунуть переменную String json в структуру JavaScript или какие еще могут быть решения проблемы.

Answer 1

[Иван Вишневский]

Всё дело в парсинге. Вот вам приходит большая JSON-строка в качестве параметра JSON. потом выделаете следующее:

(json) => {
  let parsedData = JSON.parse(json);
}

Теперь у вас объект, из которого вы можете достать вашу переменную tables, которая является массивом. Чтобы преобразовать один массив в объект, подобный тому, что вы указали, нужен метод Reduce.
Если вы в ладах с английским, то советую посмотреть первую и вторую части хорошего урока по reduce. Если не в ладах, то читайте оф.документацию. Если вкратце, reduce - мощное средство, которое делает из массива один объект, будь то коллекция, другой массив, строка. В вашем случае нужно массив перевести в коллекцию.

Answer 2

[ThunderCat]

поясните как у вас появляется json на фронтенде? Пхп, жава на бэке? Получать объект/массив на бэкенде(куча функций под все), на фронт выводится уже из массива.

Comments

[Иван Вишневский]

Как раз-таки, на фронт приходит JSON всегда. Потому что это самый удобный и простой способ управления подобными данными в Javascript.

[ThunderCat]

Потому что это самый удобный и простой способ управления подобными данными в Javascript

ну, вы спрашивали

или какие еще могут быть решения проблемы

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

[Osklizg]

Да, forgatable прав. По крайней мере я тоже так прочитал. Но приходит не массив, а строка.

[Иван Вишневский]

Osklizg: JSON.parse как раз и создан для такого, он распарсит строку в объект, содержащий массив.

[Osklizg]

forgetable: проект написан на Java, и к сожалению это уже не изменить. Если я распаршу строку в массив, как я перенесу этот массив в JavaScript?

[Иван Вишневский]

Osklizg: ой, прошу прощения, неправильно прочитал вашу строку. Для того, чтобы в js заработал JSON.parse(строка), строка должна быть следующего вида: {"tables": "["some", "text", "in", "array"]"}

То есть, всё заключено в фигурные скобки, дальше всё как в js-объекте, за исключением того, что обязательны двойные кавычки. Таким образом JSON.stringify трансформирует эту строку в js-объект:
{
tables: ["some", "text", "in", "array"]
}
Вообще, все данные на фронтенд нужно передавать именно таким образом. Кстати, чтобы конвертировать объект в JSON-строку, из js можно использовать JSON.stringify(object). Очень удобно так общаться с сервером.

Answer 3

[fedornabilkin]

Присваиваем переменной строку json. Перебираем в цикле и вставляем данные в необходимые места.

var collection = '{"tr": [{"td1": "name1","td2": "name2"},{"td1": "name1","td2": "name2"}]}';
var tr += '';
$.each(collection, function(i, tr){
tr += '<tr><td>'+tr.td1+'</td><td>'+tr.td2+'</td></tr>';
});
$('table').html(tr);

Это образно. Правильнее было клонировать строку из имеющейся таблицы и подставлять данные в нее.

Comments

[Osklizg]

как мне в var collection поместить String json, который приходит из БД, собственно в этом весь вопрос.

[fedornabilkin]

Либо получить его ajax-запросом и там же обработать. Если страница генерится с этим json, то как вариант положить эту строку в и забрать из инпута js'ом. Но если страница генерится сразу, то почему бы и таблицу сразу не сгенерить? Видимо выход в ajax.

[Osklizg]

fedornabilkin: в Ajax покопаю, спасибо.

[fedornabilkin]

Osklizg: Ну а что копать, вот уже накопано, только ссылку подставляй

$.ajax({
    url: "/get_json.php",
    type: "post",
    dataType: 'json',
    data: {},
    success: function (result) {

        console.log(result);

    }
});

Answer 4

[Ди Ма]

Превратить json в объект можно так:

// json
var json = '{"foo": "bar", "lorem": "ipsum"}';

// Парсим в объект
var obj = JSON.parse(json);

// в цикле обходим свойства объекта
// добавляя значения в таблицу
for (var i in obj) {
	var td = document.createElement('td');
	td.innerHTML = obj[i];
	tr.appendChild(td);
}

В реальности алгоритм чуть сложней, т.к. надо из ключей составить заголовки столбцов, а из значений- ячейки. Но это уже другая тема)
p.s.
Если у вас массив объектов, то надо массив обходить в одном цикле, и для каждого объекта в массиве выполнять обход в вышеприведенном цикле.

Comments

[Osklizg]

Все работает на JAVA, мне приходит строка, из который я могу выцеплять json объекты. Но как мне String json засунуть в var json я не могу понять.

[Ди Ма]

Osklizg: "выцеплять json объекты."
Что значит "выцепить"? Например, присвоить какой-нибудь переменной можно?
Вот эту переменную и пихать в JSON.parse()

[Osklizg]

Ди Ма: у меня уже есть переменная String json, я сомневаюсь, что ее можно запихнуть в JSON.parse()

[Ди Ма]

Osklizg: Вот ваша строка, прямиком в JSON.parse(); В консоли уже объект.

[Osklizg]

Ди Ма: Разобрался, спасибо!