Не могу понять почему не работает код?

Ярослав Иванов, автор удовлетворён, это главное. значит все было так как он хотел :)

Как написать блог на flask с "красивым текстом"?

kuzdman, я знаю, просто при чём тут он и "сделать поле".
Пишите форму в html файле например, добавляете js к ней.
При запросе пользователя (ajax например) фланк читает этот ваш файл, отправляет клиенту в виде json. Вы парсите его и вставляете на свою страницу уже html и js.
Это в случае если как в ВК без перезагрузки страницы. Если с перезагрузкой, то просто полностью описываете страницу редактирования.
Поле, где можно писать пост, настраивая шрифты и прочее, это делается с помощью JS не с помощью flask никак

Как написать блог на flask с "красивым текстом"?

А при чём тут flask?

Не могу понять почему не работает код?

Artem Zubkov, потому что Book[key] имеет тип Object.
Если ты хочешь вывести его в виде строки, сделай JSON.stringify(OBJECT)
OBJECT - в твоём случае это Book[key]

Не могу понять почему не работает код?

Stalker_RED, Хм...возможно)
Тогда не работает потому, что, возможно нужно

for(var key in Book) {
  console.log(Book[key]);
}

Разберись, что делает твой цикл. он перебирает ключи массива book, (так конечно не желательно делать, но можно), и затем ты всегда выводишь нулевой элемент массива console.log(Book[0]);

Как в input вывести value range ползунков?

Genri_Rus, Как ты представляешь, что бы по клику двигались оба ползунка сразу?)

Как в input вывести value range ползунков?

Genri_Rus, дай подумать %)

Как вызвать код функции?

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

var f = new Function(xhr.responseText)
f();

и уже потом её вызвать
Но честно, не уверен в варианте)

Как сделать увеличение изображения?

написать руками, либо использовать библиотеки для этого.... в гугле просто ищутся, что-то по типа галереи фото в html

Задержка анимации на определенном проценте?

Анита Ковалева, можно сделать два keyframe на появление и скрытие, и в свойстве анимации задать их два друг за другом со своими параметрами.... второму задать задержку несколько секунд
div {animation: show 1s ease-in 0.5s, hide 5s ease-out 4s;}

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

animation: errorblock_show 3s ease-in, errorblock_hide 3s ease-in 5s;
animation-fill-mode: forwards;

Как поставить блок под блоком?

SeltonSoer, Ну это не факт, мы не знаем что тут считается блоком..(по идее это div) но вдруг span, хз, это может быть что угодно. Да и без кода, как я написал, не ясно меняли свойство display или нет :)

Как в input вывести value range ползунков?

Genri_Rus, можно сделать что-то типа такого

....
    var val1 = parseInt(sliders[0].value);
    var val2 = parseInt(sliders[1].value);
    
    if (val1 >= val2 ||
        val2 <= val1) {
        sliders[0].value = val_outputs[0].val();
        sliders[1].value = val_outputs[1].val();
        return; 
    }
....

т.е. либо хранить где-то предыдущие значения отдельно, но т.к. они по идее сохранены уже в input полях, можно использовать их...конечно маленько колхоз имхо.

Как искать в массиве js по id?

Если у вас используется массив, то нужен как минимум перебор его, через циклы и внутри уже искать нужные данные. Я так понял, что элементы массива это объекты, по типу {id: number, name: string}
Если id или name уникальны, и id имеет не сквозные номера, то проще имхо использовать хэш таблицу (или просто JS объект)

var r = {
  id1: name,
  id2: name,
  id3: name
  ....
}

тогда искать имя по id можно будет просто
r[id] вернёт имя присвоенное определённому id

А в вашем случае, если менять ничего не хочется, то используйте просто цикл (for | while)

var name;
for (var i = 0, l = vm.roles.length; i < l; i++){
   var role = vm.roles[i];
  if (role.id == "id") {
    name = role.name;
    break;
 }
}