Есть ли какой-нибудь универсальный способ пройтись по JSON и записать в DOM?

Question

[ZaxapKramer]

Имеется JSON типа такого:

{
	title: "Grocery",
	food: ["apple", "banana", "cucumber"]
}

или такого:

{
	title: "Grocery",
	food: [
		{
			fruit: "Apple",
			vegetable: "Cucumber"
		}
		{
			fruits: { "Banana", "Chery" },
			vegetable: "Tomato",
			other: "Cheese"
		}
	]
}

Необходимо что-то просто и универсальное - каким-то образом засунуть все это в DOM или просто в строку. Ибо то, что есть сейчас (вырисовывается) весьма и весьма запутано: пишу шаблонизатор для клиентского js в несколько строк (работает на replace и RegExp).

Заранее спасибо. Буду рад идеям.

Answer 1

[Алексей Ярков]

Универсального способа не может быть в принципе. Вы JSON к единой структуре приведите, а потом шаблонизатор пишите.
Кстати, я тут недавно рандомизатор писал. Посмотрите, вдруг пригодится.

Comments

[Дмитрий Беляев]

У Вас в методе merge arguments-leek & for-in statement
Учитывая, что он построен на рекурсии, вырубать оптимизацию не лучшая идея

[Алексей Ярков]

Дмитрий Беляев: stackoverflow.com/a/33162719 Полагаю это решение? Как раз сегодня про это читал.

[Дмитрий Беляев]

Алексей Ярков: Вот самый быстрый вариант:

var args;for(let i = arguments.length, a = args = new Array(i); i--;){a[i]=arguments[i];}

А в место for-in используйте:
for(let key of Object.keys(obj)){}for(let key of Object.getOwnPropertyNames(obj)){}

[ZaxapKramer]

Дмитрий Беляев, поначалу обрадовался (про for-of), но потом глянул совместимость: не особо он сейчас подходит без поддержки IE (хотя бы IE9 (может, проглядел)). Сам сначала от IE отказался, но потом как-то... совесть замучила, что ли. Спасибо, полезно.

[Дмитрий Беляев]

ZaxapKramer: babel в помощь

Answer 2

[lega]

пройтись по JSON и записать в DOM

Нужно вывести json в DOM? для этого не нужен шаблонизатор - одна строка кода.
Можно какой-нибудь такой генератор html сделать.
А вообще, вам с начало нужно определиться, что нужно получить в результате.

Answer 3

[Eugene 222]

Вы, простите, прикалываетесь?

https://facebook.github.io/react/
www.ractivejs.org
https://vuejs.org/examples/
https://github.com/Lucifier129/react-lite
https://mustache.github.io/