Класс javascript, который принимает объект JSON и преобразует его в свойство атрибута.

0

Я попытался преобразовать объект JSON в строку атрибута в javascript.

Подобно:

json = {a:"1", b:"2"};

и вывод будет html-элементами, например

"< div a='1', b='2'>< /div>"

Я попытался таким образом,

var json = {a:"1",    b:{c:"2", d:"3"}};
function myFunction(obj, json) {
    for (var i in json) {
        obj[i] = json[i];
    }
}

Насколько я знаю, obj создан, но я не смог сделать правильный вывод, который можно использовать в html, потому что объект json может быть вложенным. Извините снова за этот вопрос noob.

Ну, я пишу что-то вроде этого:

var o = {a:"1",    b:{c:"2", d:"3"}}    
function objToString (obj) {
    var str = '<div ';
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            str += p + '=' + '"'+obj[p]+'"' + ',';
        }
    }
    str= str.replace(/,$/ , '>');
    return str;
}
objToString (o);

Но приведенный выше код не работает для вложенного объекта. Итак, я пробовал так:

var o = {
    a: "1",
    b: {
        c: "2",
        d: "3"
    }
}
console.log(o);
var tx = new String();
tx = '<div ' + JSON.stringify(o) + '>';
console.log(tx);
tx.replace(/:/gi, '=');
tx = tx.replace(/}/, '');
tx = tx.replace(/{/, '');
console.log(tx);

Но на этот раз выход не соответствует правильному html... Haven save me :(

  • 0
    в случае {a:"1", b:{c:"2", d:"3"}} что должно быть на выходе
  • 0
    см. jsfiddle.net/arunpjohny/JNHF6/1
Показать ещё 8 комментариев
Теги:

2 ответа

1
Лучший ответ

Я запрограммировал что-то, что должно решить вашу проблему. Если я правильно понял, это именно то, что вам нужно.

Я решил эту проблему, используя рекурсию и шаблон посетителя. Работает как шарм. Я не тестировал его для всех возможных типов, но отсутствующие типы могут быть легко вставлены, когда это необходимо. В настоящее время массивы рушится - вам придется поймать это, если они появятся тоже.

Некоторое объяснение:

1) Я проверил типы значений.

2) Я инициализировал массив, в котором хранятся значения, которые я мог найти.

3) Я написал рекурсивный метод, который проверяет свойства объекта для объектов

4) Если свойство является объектом, оно будет использоваться рекурсивно в том же методе.

5) Если свойство не является объектом, его данные будут добавлены к ранее инициализированному массиву.

6) После выполнения рекурсивного метода я отлаживаю массив и создаю образец вывода.

// the object to use:   
var o = {a:1,    b:{c:"2", d:"3"}}  

// some type testing:
//alert(typeof(o.a)); // string
//alert(typeof(o.b)); // object


// implement a recursive method that reads all
// the needed stuff  into a better-to-handle array.
function readAttributesRecursive(obj, arr) {
    for(prop in obj) {

        // get the value of the current property.
        var propertyValue = obj[prop];
        // get the value type
        var propertyValueType = typeof(propertyValue);


        // if it is no object, it is string, int or boolean.
        if(propertyValueType !== 'object') {
            arr.push({
                property : prop,
                value : propertyValue,
                type : propertyValueType // just for debugging purposes
            });
        } 
        // otherwise it is a object or array. (I didn't test arrays!)
        // these types are iterated too.
        else {
            // red the object and pass the array which shall 
            // be filled with values. 
            readAttributesRecursive(propertyValue, arr);
        }
    }
} // END readAttributesRecursive(obj, arr)



// ok, lets get the values:
var result = new Array();
readAttributesRecursive(o, result)

console.debug(result);

//  the result looks like this:
//  [
//      { property : "a", type : "number", value: "1" }
//      { property : "c", type : "string", value: "2" }
//      { property : "d", type : "string", value: "3" }
//  ]


// And now do the <div>-stuff:
var div = '<div';
for(i = 0; i < result.length; i++) {
    var data = result[i];
    div += ' ' + data.property + '="' + data.value + '"';
}
div += ">Some text</div>";

console.debug(div);

Примечание. Никогда не создавайте такие HTML-элементы (используя строки)! Используйте document.createElement() и работайте с созданными DOM-элементами. Использование строк может привести к странному поведению, ошибкам и менее читаемому коду... (строки не обрабатываются ТОЛЬКО как DOM-элементы после вставки в DOM)

Поделиться
  • 0
    большое спасибо @rulebot! это именно то, что я хочу :)
1

Вы просто ищете jQuery .attr()? Вы можете создать элемент, добавить несколько атрибутов и текст и добавить его к телу, как это:

$('<div/>')
  .attr({
    "class":"some-class",
    "id":"some-id",
    "data-fancy": "fancy pants"
  })
  .text('Hello World')
  .appendTo('body');
Поделиться
  • 0
    Ваш пример мне очень помогает! @законопроект

Ещё вопросы

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