2014-01-09 5 views
1

Я понятия не имею, почему это ничего не отображает. Я пытаюсь получить информацию в var txt для динамического генерации в html!json objects javascript confusion

function byId (id) { 
    return document.getElementById(id); 
} 

var txt = '{"characters":[' + 
'{"fullName":"John Doe","speci":"human male","occup":"Web Personality","cide":"Sleeper","descr":"blah","biog":"blarg","allia":"chaos good" },' + 
'{"fullName":"Jane Doe","speci":human female",occup":"Movie Producer","cide":"Citric","descr":"bluh","biog":"blurg","allia":"neutral" },' + 
'{"fullName":"Canter Doma","speci":alien male",occup":"Chef","cide":"Galv","descr":"bleh","biog":"blerg","allia":"evil" }]}'; 

var obj = eval ("(" + txt + ")"); 

byId("fname").innerHTML = obj.characters[1].fullName; 
byId("spec").innerHTML = obj.characters[1].speci; 
byId("occu").innerHTML = obj.characters[1].occup; 
byId("cid").innerHTML = obj.characters[1].cide; 
byId("desc").innerHTML = obj.characters[1].descr; 
byId("bio").innerHTML = obj.characters[1].biog; 
byId("alli").innerHTML = obj.characters[1].allia; 

У меня есть тестовая ссылка здесь. http://jsfiddle.net/KLer3/

+1

ли вы проверить на наличие ошибок синтаксиса? Попробуйте запустить через http://jsonlint.com/ и использовать 'JSON.parse()' – megawac

+0

http://jsfiddle.net/KLer3/2/ Я исправил ошибки синтаксиса, и он все еще не работает – riotgear

+1

Строки JavaScript не могут охватывать несколько строк. Обязательно проверьте свою консоль JS на наличие ошибок. –

ответ

1

Это может быть лучше, если вы не используете eval.

Вам не хватало котировок на занятиях и пришельцах.

{ 
"characters":[ 
    { 
    "fullName":"John Doe", 
    "speci":"human male", 
    "occup":"Web Personality", 
    "cide":"Sleeper", 
    "descr":"blah", 
    "biog":"blarg", 
    "allia":"chaos good" 
    }, 
    { 
    "fullName":"Jane Doe", 
    "speci":"human female", 
    occup":"Movie Producer", 
    "cide":"Citric", 
    "descr":"bluh", 
    "biog":"blurg", 
    "allia":"neutral" 
    }, 
    { 
    "fullName":"Canter Doma", 
    "speci": "alien male", 
    "occup":"Chef", 
    "cide":"Galv", 
    "descr":"bleh", 
    "biog":"blerg", 
    "allia":"evil" 
    } 
]} 
+0

Хм, это все очень полезно. Я действительно знаю, что знаю лучшие практики. просто найдите образец онлайн и запустите его. Последние 2 вещи Im пытается убежать, чтобы добавить изображение в мой массив, но он также разбивает массив. Как написать это, чтобы он выплевывал все символы на странице Я учусь, и я не знаю, как все это назвать. http://jsfiddle.net/mn9 LV/1/ – riotgear

+1

Вы пытаетесь запустить, прежде чем сможете ходить. Прочтите хорошую книгу JS, такую ​​как «Javascript: The Good Parts», перед тем, как начать с подобного проекта. Также рассмотрите возможность использования библиотеки JQuery для более чистого кода обработки HTML. – slim

0

В вашем JSON отсутствуют котировки. Например:

"speci":"human female",occup": "Movie Producer", 

... отсутствует вводная цитата для «занимать» (и есть больше аналогичных ошибок).

Исправить эти и ваш код работает.

Однако, не рекомендуется использовать eval() для анализа JSON, поскольку он позволяет вводить код, отличный от назначения структуры данных.

JSON.parse() Используйте вместо этого:

var obj = JSON.parse(txt); 

Я предполагаю, что вы пишете JSON строки вручную, как способ экспериментировать. Не делайте этого в реальном коде. Используйте JSON.stringify() или его эквивалент на сервере.

Если вы действительно хотите, чтобы ваш инлайн данные с кодом, вам не нужно JSON вообще - просто объявить его на месте:

var obj = { characters: [ 
    {"fullName":"John Doe","speci":"human male", ... }, 
    {"fullName":"Jane Doe","speci":human female", ... }, 
    ... 
]}; 
1

Несколько вопросов:

  • Вашего JSON является не правильно отформатирован. Для проверки синтаксиса используйте http://jsonlint.com/.
  • Строки JavaScript не могут охватывать несколько строк.
  • Использовать JSON.parse вместо eval. См. this.

Обновлено скрипка: http://jsfiddle.net/KLer3/4/

0

У вас есть несколько синтаксических ошибок с отсутствующими кавычками " - Убедитесь, что код написано правильно, прежде чем если вы сделали что-то неправильно ... В противном случае, кажется, что она должна работать .. .

+0

Да, да! Спасибо всем Это именно то, что я имел в виду. Любая идея, как я могу заставить свой массив символов выплевывать все данных на странице сразу. Как если бы у меня было 30 разных персонажей и хотелось, чтобы все они отображались. http://jsfiddle.net/mn9LV/ – riotgear

0

Ваша строка должна выглядеть следующим образом:

var txt='{' 
+ '"characters": [' 
+  '{' 
+   '"fullName": "John Doe",' 
+   '"speci": "human male",' 
+   '"occup": "Web Personality",' 
+   '"cide": "Sleeper",' 
+   '"descr": "blah",' 
+   '"biog": "blarg",' 
+   '"allia": "chaos good"' 
+  '},' 
+  '{' 
+   '"fullName": "Jane Doe",' 
+   '"speci": "humanfemale",' 
+   '"occup": "Movie Producer",' 
+   '"cide": "Citric",' 
+   '"descr": "bluh",' 
+   '"biog": "blurg",' 
+   '"allia": "neutral"' 
+  '},' 
+  '{' 
+   '"fullName": "Canter Doma",' 
+   '"speci": "alienmale",' 
+   '"occup": "Chef",' 
+   '"cide": "Galv",' 
+   '"descr": "bleh",' 
+   '"biog": "blerg",' 
+   '"allia": "evil"' 
+  '}' 
+ ']' 
+'}'; 

Но, как было отмечено в комментариях, делая этот разбор б y рука - не лучшая практика.

1
  1. Просто пару двойных кавычек отсутствует.
  2. Эта часть: var obj = eval ("(" + txt + ")"); не требуется. Я установил ее как этот var obj = txt; для быстроты.

Посмотрите код:

Смотрите код прямо сейчас: http://jsfiddle.net/KLer3/6/