2
var componente = {

    HTML :'<div class="alert" style="background-color:#951f2c !important;">' +
    '<input type="text" class="form-control titulo-valor" placeholder="Digite o Título do Bloco" style="background-color:#951f2c !important; color: white !important; border:none !important;"/>'+
    '</div>'
};
$(document).ready(function(){
    $(".btn").on("click",function(){
        var componenteAtual = $(this).data("componente");

        $(".resultado").html(componente.componenteAtual);    
    });    
});

Estou tentando adicionar elementos na html dinamicamente usando JSON com várias tags dentro. Não está funcionando, dei um alert no componente.componenteAtual e ele está retornando undefined como resultado. Se eu escrever componente.HTML funciona...

Abaixo há o jsfiddle:

https://jsfiddle.net/vxq92vzw/

1 Resposta 1

2

Para acerder a propriedades de objetos de maneira dinâmica tens de usar parentesis retos, ou seja:

componente['nome da propriedade aqui']

Quando usas .html(componente.componenteAtual); isso vai procurar uma propriedade chamada componenteAtual no objeto, mas ela não existe. O que deves fazer é

.html(componente[componenteAtual]);

pois dessa maneira componenteAtual é convertido no valor que guarda (HTML) e na prática fica:

.html(componente['HTML']);

jsFiddle: https://jsfiddle.net/Lr033bna/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .