Как решить проблему с кириллицей в JSON?

Question

[Spliff-Guru]

Существует проект страницы, на которой пользователь:
1. выбирает город, отображая план мероприятия
2. выбирает время события в мероприятии, отображая описание отдельного события

Во 2 пункте используется формула:

...
newContent += times[loc][i].title.replace(/ /g, '-') + '">';
..

которая подгружает описание события по идентификатору, получаемому из элемента title JSON-файла с названиями событий мероприятия (здесь: 3D-моделирование):

{
    "CA": [
        {
            "time": "9:00",
            "title": "3D-моделирование"
        },
...

ищет соответствующий идентификатор (т.е. 3D-моделирование) в html-файле и выводит описание на странице (в данном случае не работает, так как идентификатор на латинице - Intro-to-3D-Modeling):

...
<div id="Intro-to-3D-Modeling">
      <h3>3D-моделирование</h3>
      <p>Описание</p>
    </div>
...

Проблема в том, что если в JSON-файле текст в элементах title указан кириллицей, описания не отображаются. Если латиницей - все работает. JSON латиницей не могу написать, так как этот же текст отображается на веб-странице. Естественно и значения атрибутов id не могу кириллицей написать.
Как быть?

Comments

[Алексей Уколов]

У вас json отдается с кодировкой в заголовке UTF-8? Из вопроса не очень понятно в чем конкретно проблема - покажите неработающий код.

[Spliff-Guru]

Код json-файла полностью такой:

{
"CA": [
{
"time": "9:00",
"title": "3D-моделирование"
},
{
"time": "10:00",
"title": "Взлом цепи"
},
{
"time": "11:30",
"title": "Забавы с Arduino"
},
{
"time": "13:00",
"title": "Обед из 3D-принтера"
},
{
"time": "14:00",
"title": "Запуск дронов"
},
{
"time": "15:00",
"title": "Тайны мозга"
},
{
"time": "16:30",
"title": "Взгляд в будущее"
}
]
}
Весь пример https://yadi.sk/d/xHYKhrl1f9Khd

[Spliff-Guru]

Т.е. явно кодировка не прописана, сам файл сохранен в UTF-8

[Алексей Уколов]

Spliff-Guru: Кодировка должна в заголовке ответа указываться.

[Spliff-Guru]

Алексей Уколов: Объясните, пожалуйста, как реализовать? Туплю

[Алексей Уколов]

Spliff-Guru: У вас json с сервера как отдается?

[Spliff-Guru]

Уф.. Это локальный пример - на сервере не будет размещен

[Spliff-Guru]

Код целиком здесь
Весь пример https://yadi.sk/d/xHYKhrl1f9Khd

[Алексей Уколов]

Spliff-Guru: Вы как пример запускаете - через локальный веб-сервер (по http) или просто файл в браузере (через file://)?

[Алексей Уколов]

Spliff-Guru: Где у вас описания вообще должны отображаться?

[Spliff-Guru]

И так и так не работает, как просто запущенный файл (file://), так и на сервере.

Если использовать title и id на латинице - все работает

---
Я так понимаю - суть в том, что функция запрашивает значение title из JSON (3D-моделирование) и по этому значению ищет id в HTML-файле с описаниями (так как там указано Intro-to-3D-Modeling - пример не работает). Эти значения (и title и id) должны быть одинаковы, но я не могу использовать латиницу в title или кириллицу в id
Также я не могу использовать функцию
newContent += times[loc][i].time.replace(/ /g, '-') + '">';
вместо
newContent += times[loc][i].title.replace(/ /g, '-') + '">';
хотя в этом случае все работает - у меня несколько мероприятий с одинаковыми событиями в разное время. Привязку описания надо делать именно по названию события, но не по времени.

Если в json я создаю новый элемент, код вовсе перестает работать

[Spliff-Guru]

Алексей Уколов: Справа, в 3 столбце. См. оригинал
javascriptbook.com/code/c08/example.html

Answer 1

[Adamos]

Не смотрел прикрепленный файл, но по самому вопросу ощущение, что вы занимаетесь ерундой.
Перебирайте все h3 на странице, у того, у которого текст совпадет с вашим title - получайте родительский элемент. Никаких id, и текст может быть произвольным.

Comments

[Spliff-Guru]

Это мне придется существенно менять код, что непозволительно

[Adamos]

Spliff-Guru: Существенно?!
Если используется jQuery - разница на одну-две строчки получится...

Answer 2

[Александр Зачиналов]

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

{
    "CA": [
        {
            "time": "9:00",
            "title": "3D-моделирование"
        },
...

<div id="CA">
      <h3>3D-моделирование</h3>
      <p>Описание</p>
    </div>