Я пытаюсь сгенерировать массив, но те же теги идентификатора нарушают HTML - JavaScript

0

Я весь день борюсь с этим. Прежде чем я узнаю, как сделать эту динамику, я хочу сгенерировать несколько div с идентификационными тегами id или classnames вместо идентификаторов. Какое бы ни было легче. В настоящее время у меня проблема, когда моя страница выплескивает массив, где каждый div имеет одинаковый идентификатор. Пожалуйста, порекомендуйте.

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

var txt = {
    "characters": [{
            "thumbn": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>",
            "fullName": "John Doe",
            "speci": "human male",
            "occup": "Web Personality",
            "cide": "Sleeper",
            "descr": "blah",
            "biog": "blarg",
            "allia": "chaos good",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/ban_two.jpg\"\/>"
    },

    {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Jane Doe",
            "speci": "human female",
            "occup": "Movie Producer",
            "cide": "Citric",
            "descr": "bluh",
            "biog": "blurg",
            "allia": "neutral",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
    },

    {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Canter Doma",
            "speci": "alienmale",
            "occup": "Chef",
            "cide": "Galv",
            "descr": "bleh",
            "biog": "blerg",
            "allia": "evil",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
    }]
};

var obj = txt;
//obj.toString();
byId("thumb").innerHTML = obj.characters[0,1,2].thumbn;
byId("fname").innerHTML = obj.characters[0,1,2].fullName;
byId("spec").innerHTML = obj.characters[0,1,2].speci;
byId("occu").innerHTML = obj.characters[0,1,2].occup;
byId("cid").innerHTML = obj.characters[0,1,2].cide;
byId("desc").innerHTML = obj.characters[0,1,2].descr;
byId("bio").innerHTML = obj.characters[0,1,2].biog;
byId("alli").innerHTML = obj.characters[0,1,2].allia;
byId("char").innerHTML = obj.characters[0,1,2].fullon;

http://jsfiddle.net/mn9LV/8/

  • 0
    Посмотрел на скрипку, я все еще немного размышляю о том, что проблема / что вы пытаетесь сделать. Я не вижу дубликатов. Вы пытаетесь создать несколько карт, по одной для каждого персонажа, или вы пытаетесь взять одну карту и заменить ее содержимое статистикой другого персонажа или что-то еще?
  • 0
    Я хочу, чтобы все объекты генерировать в html, а не только последний в массиве. Я просто понял, где я испортил, но я не знаю, как это исправить. HTML-код является статическим, мне нужно как-то генерировать этот кусок каждый раз с уникальным идентификатором для всех объектов, которые у меня есть в моем массиве!
Теги:
arrays

2 ответа

0

Не 100% уверены, что вы пытаетесь сделать, но с быстрым взглядом вы, вероятно, не ссылаетесь на массив символов, как вы предполагали:

obj.characters[0,1,2].thumbn;

Всегда будет давать вам 3 - й элемент в массиве, как использование Вами , (запятая) оператор в этом случае всегда будет приводить к значению, передаваемое в качестве 2.

Если вам нужен элемент 1, obj.characters[0], пункт 2 obj.characters[1] и т.д.

Чтобы развернуть, последнее значение будет возвращено возвращаемым значением ряда запятых в javascript. т.е.: ('a',1020,'dog') будет оцениваться как "собака". (10,20,30) == 30//true

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

Поделиться
0

Ваш массив не работает так

У вас есть {[{},{},{}]}, это означает object { array [ object {}, object {}, object {} ] }

То, что вы написали, не просто возможно с помощью json и javascript

Вместо этого попробуйте

// John Doe
byId("thumb").innerHTML = obj.characters[0].thumbn;
byId("fname").innerHTML = obj.characters[0].fullName;
byId("spec").innerHTML = obj.characters[0].speci;
byId("occu").innerHTML = obj.characters[0].occup;
byId("cid").innerHTML = obj.characters[0].cide;
byId("desc").innerHTML = obj.characters[0].descr;
byId("bio").innerHTML = obj.characters[0].biog;
byId("alli").innerHTML = obj.characters[0].allia;
byId("char").innerHTML = obj.characters[0].fullon;

Далее 1

// Jane Doe
byId("thumb").innerHTML = obj.characters[1].thumbn;
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;
byId("char").innerHTML = obj.characters[1].fullon;

== Редактировать ==

Чтобы лучше удовлетворить ваши потребности на основе комментариев, этого может быть достаточно

Закройте свой объект в литерале и создайте функции, необходимые для фильтрации или сборки html в литерале

var obj = {
    txt: {
        "characters": [{
            "thumbn": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>",
            "fullName": "John Doe",
            "speci": "human male",
            "occup": "Web Personality",
            "cide": "Sleeper",
            "descr": "blah",
            "biog": "blarg",
            "allia": "chaos good",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/ban_two.jpg\"\/>"
        },

        {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Jane Doe",
            "speci": "human female",
            "occup": "Movie Producer",
            "cide": "Citric",
            "descr": "bluh",
            "biog": "blurg",
            "allia": "neutral",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
        },

        {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Canter Doma",
            "speci": "alienmale",
            "occup": "Chef",
            "cide": "Galv",
            "descr": "bleh",
            "biog": "blerg",
            "allia": "evil",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
        }]
    },
    byId: function(id) {
        return document.getElementById(id);
    },
    buildHtml: function(id) {
        this.byId("thumb").innerHTML = this.txt.characters[id].thumbn;
        this.byId("fname").innerHTML = this.txt.characters[id].fullName;
        this.byId("spec").innerHTML = this.txt.characters[id].speci;
        this.byId("occu").innerHTML = this.txt.characters[id].occup;
        this.byId("cid").innerHTML = this.txt.characters[id].cide;
        this.byId("desc").innerHTML = this.txt.characters[id].descr;
        this.byId("bio").innerHTML = this.txt.characters[id].biog;
        this.byId("alli").innerHTML = this.txt.characters[id].allia;
        this.byId("char").innerHTML = this.txt.characters[id].fullon;
    }
};

Применение

var objectById = obj.byId(0);
// Or build html
obj.buildHtml(1);
Поделиться
  • 0
    Я действительно хочу найти более чистый способ прохождения каждого через массив, который пуст с i ++, но я борюсь с терминологией. Я думаю, что отображение по одному - это хорошо ... Я просто хочу создать способ, с помощью которого можно переключаться между ними.
  • 0
    я не могу просто прокрутить каждый символ [] как-нибудь?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню