Escapar < e > (está retornando < e >)

[Maykel-ctba 233]

Galera, tenho o seguinte caso.

 

Tenho um sistema de upload multiplo de fotos, e o mesmo utiliza Javascript pra montar o template do usuário na tela. Porém, estou tentando personalizar colocando um select a mais, mas os options estão retornando com as tags HTML escapadas.

 

Como posso resolver?

 

O codigo que monta o template (deixei só a parte que traz HTML):

<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
        <tr class="template-download fade">
            <td width="22%">
                <select name="slCrop" style="width:100%">
                    {%=file.crop%}
                </select>
            </td>
        </tr>
    {% } %}
</script>

O retorno de files é um JSON:

{"files":[{"id":"50","legenda":"","crop":"<option selected value=\"top-left\">top-left<\/option><option  value=\"top\">top<\/option><option  value=\"top-right\">top-right<\/option><option  value=\"left\">left<\/option><option  value=\"center\">center<\/option><option  value=\"right\">right<\/option><option  value=\"bottom-left\">bottom-left<\/option><option  value=\"bottom\">bottom<\/option><option  value=\"bottom-right\">bottom-right<\/option>","ordem":"1","name":"20150309182714.jpeg","size":462963,"url":"\/upload\/imagem\/20150309182714.jpeg","thumbnailUrl":"\/upload\/imagem\/thumbnail\/20150309182714.jpeg","deleteUrl":"\/common\/lib\/multiple-upload\/?file=20150309182714.jpeg","deleteType":"DELETE"}]}

Mas, no HTML impresso, todos estes options estão sendo escapados (< e >).

[William Bruno 1501]

Sim!!

 

Não retorne html, nunca! Você está quebrando o conceito de template.

Retorne dados, retorne um array e monte os options com um loop no template.

[jhrhp 15]

Se você der um decodeURI não resolve?

 

Até mais.

[Maykel-ctba 233]

@William eu pensei nisso, e eu tentei. HAHAH, tentei montar o array, porém não estou conseguindo "multidimensioná-lo" (tópico aqui) pois preciso informar quais options terão o parâmetro "selected".

 

Então achei mais cômodo tentar solucionar desta maneira. Mas se é melhor, então o jeito é fazer do jeito certo.

 

Mas supondo que voltou um array.

 

Eu faço o laço deste array para popular o template através da tag "{% %}".

 

Esse negócio de template é novo ainda pra mim, hehe.

 

 

 

@jhrhp mas o decodeURI tem um tipo de dados e o html special chars (como é o retorno do meu caso) é outro, não? Acredito que não dará certo.

[William Bruno 1501]

o retorno deve ser:

 

"crop": [{name: "top-left", selected: true}, {name: "top-right"}, {name: "bottom-left"}, {name: "bottom-right"}]

e então a forma de fazer o loop no template, vai depender do sistema de template que você está usando, qual é ?

[Maykel-ctba 233]

@William, o array/json é gerado via PHP.

foreach($resultado as $registro)
{
	$arrayInfo['files'][$contadorArray]['id'] = $registro['imgId'];
	
	$listaOption = "";
	
	foreach ($options as $key => $option){
		$listaOption[] = $option;
		if(optSelected($registro['imgCrop'], $option)){
/////			$listaOption[][] = "selected";
		}
	}
	
	$arrayInfo['files'][$contadorArray]['crop'] = $listaOption;

	$contadorArray++;
}

Na linha aonde tem o ///// acima, é aonde estou me quebrando para gerar o array do jeito certo.

Bom, consegui gerar o JSON desta maneira:

{"files":[
{
	"id":"51",
    "legenda":"",
    "crop":{
    	"1":{
            "name":"top-left",
            "selected":true},
        "2":{
            "name":"top",
            "selected":false},
        "3":{
            "name":"top-right",
            "selected":false},
        "4":{
            "name":"left",
            "selected":false},
        "5":{
            "name":"center",
            "selected":false},
        "6":{
            "name":"right",
             "selected":false},
        "7":{
            "name":"bottom-left",
            "selected":false},
        "8":{
            "name":"bottom",
            "selected":false},
        "9":{
            "name":"bottom-right",
            "selected":false}
        },
    "ordem":"2",
    "name":"20150309182714 (1).jpeg",
    "size":165351,
    "url":"\/upload\/imagem\/20150309182714 (1).jpeg",
    "thumbnailUrl":"\/upload\/imagem\/thumbnail\/20150309182714 (1).jpeg",
    "deleteUrl":"\/common\/lib\/multiple-upload\/?file=20150309182714 (1).jpeg",
    "deleteType":"DELETE"
}]}

agora preciso montar o select lá no template... como faz? hahah

[Maykel-ctba 233]

Esqueci de citar qual sistema de templates estou usando. O sistema utiliza JavaScript Templates

[William Bruno 1501]

Qual é o sistema de template que você tá usando ?

Tem que ler a documentação lá, mas esse JSON está muito estranho.. não faz nenhum sentido esses indices numéricos.

 

crop deveria ser um array e não um objeto

[Maykel-ctba 233]

Dentro de "crop"eu posso montar o JSON do jeito que quiser. Como vem do PHP, posso formatar como bem entender.

Como seria o ideal? Acho que faz sentido, seria o ID referente a cada opção.

 

O JSON é gerado via PHP através deste Array:

Array
(
    [files] => Array
        (
            [0] => Array
                (
                    [id] => 51
                    [legenda] => 
                    [crop] => Array
                        (
                            [1] => Array
                                (
                                    [name] => top-left
                                    [selected] => 1
                                )

                            [2] => Array
                                (
                                    [name] => top
                                    [selected] => 
                                )

                            [3] => Array
                                (
                                    [name] => top-right
                                    [selected] => 
                                )

                            [4] => Array
                                (
                                    [name] => left
                                    [selected] => 
                                )

                            [5] => Array
                                (
                                    [name] => center
                                    [selected] => 
                                )

                            [6] => Array
                                (
                                    [name] => right
                                    [selected] => 
                                )

                            [7] => Array
                                (
                                    [name] => bottom-left
                                    [selected] => 
                                )

                            [8] => Array
                                (
                                    [name] => bottom
                                    [selected] => 
                                )

                            [9] => Array
                                (
                                    [name] => bottom-right
                                    [selected] => 
                                )

                        )

                    [ordem] => 2
                    [name] => 20150309182714 (1).jpeg
                    [size] => 165351
                    [url] => /upload/imagem/20150309182714 (1).jpeg
                    [thumbnailUrl] => /upload/imagem/thumbnail/20150309182714 (1).jpeg
                    [deleteUrl] => /common/lib/multiple-upload/?file=20150309182714 (1).jpeg
                    [deleteType] => DELETE
                )

        )

)

Lendo a documentação, tentei fazer isso:

<select name=\"slCrop\" style=\"width:100%\">
	{% for (var i = 0; i < (file.crop).length; i++) { %}
		<option>{%=file.crop[i]%}</option>
	{% } %}										
</select>

Mas dá erro no console.

 

 

Hora: 10/03/15 15:35:23

Erro: allocation size overflow

Arquivo-fonte: http://localhost/sistema/js/script/multiple-upload/template/tmpl.min.js line 1 > Function

Linha: 1

[William Bruno 1501]

Não, não faz sentido esse índice.

O correto é assim, da forma que falei lá em cima:

 

"crop": [{name: "top-left", selected: true}, {name: "top-right"}, {name: "bottom-left"}, {name: "bottom-right"}]

[Maykel-ctba 233]

William, eu não posso atribuir dois valores em um elemento sem que o mesmo tenha um "numero pai". Senão eles ficariam soltos. Ao menos que eu saiba não consigo converter dessa maneira um array para JSON no PHP.

 

Não estou sabendo como fazer o JSON sair dessa maneira sem que tenha o número correspondente.

Mas isso influi tanto? Não é possível fazer com a saída que te mostrei?

[William Bruno 1501]

Pq você tá fazendo com objeto e deveria ser array.

 

Olha a diferença: objeto

    "crop": {

deveria ser array:

    "crop": [

entendeu ? tem dúvidas no php também ?

Se tiver, poste o seu código mais atual php que eu te ajudo lá também.

[Maykel-ctba 233]

Ah entendi!

 

Mas parece q consegui aqui.

 

Template

<select name=\"slCrop\" style=\"width:100%\">

<option>Escolha uma área de corte</option>

{% for (var x = 0; x < (file.crop).length; x++) { %}

{% if (file.crop[x]['selected'] == \"true\") { %}

<option selected value=\"{%=file.crop[x]['name']%}\">{%=file.crop[x]['name']%}</option>

{% } else { %}

<option value=\"{%=file.crop[x]['name']%}\">{%=file.crop[x]['name']%}</option>

{% } %}

{% } %}

</select>

Funcionou certinho, mesmo estando em objeto. haha

 

JSON:

{"files":[{"id":"51","legenda":"","crop":[{"name":"top-left","selected":"true"},{"name":"top","selected":"false"},{"name":"top-right","selected":"false"},{"name":"left","selected":"false"},{"name":"center","selected":"false"},{"name":"right","selected":"false"},{"name":"bottom-left","selected":"false"},{"name":"bottom","selected":"false"},{"name":"bottom-right","selected":"false"}],"ordem":"2","name":"20150309182714 (1).jpeg","size":165351,"url":"\/upload\/imagem\/20150309182714 (1).jpeg","thumbnailUrl":"\/upload\/imagem\/thumbnail\/20150309182714 (1).jpeg","deleteUrl":"\/common\/lib\/multiple-upload\/?file=20150309182714 (1).jpeg","deleteType":"DELETE"}]}

PHP

if(!empty($resultado))
{
	function optSelected ($Selected, $Value) {
		return ($Selected == $Value ? true : false);
	}
	$options = array(
		 'top-left',
		 'top',
		 'top-right',
		 'left',
		 'center',
		 'right',
		 'bottom-left',
		 'bottom',
		 'bottom-right'
	);
	
	foreach($resultado as $registro)
	{
		$arrayInfo['files'][$contadorArray]['id'] = $registro['imgId'];
		$arrayInfo['files'][$contadorArray]['legenda'] = $registro['imgLegenda'];
		
		$listaOption = array();
		
		for( $i = 0; $i < count( $options ); $i++ ){
			$listaOption[$i]['name'] = $options[$i];
			if(optSelected($registro['imgCrop'], $options[$i])){
				$listaOption[$i]['selected'] = "true";
			}
			else{
				$listaOption[$i]['selected'] = "false";
			}
		}
		
		$arrayInfo['files'][$contadorArray]['crop'] = $listaOption;
		$arrayInfo['files'][$contadorArray]['ordem'] = $registro['imgOrdem'];
		$arrayInfo['files'][$contadorArray]['name'] = $registro['imgUrl'];
		$arrayInfo['files'][$contadorArray]['size'] = filesize("../../../upload/imagem/".$registro['imgUrl']);
		$arrayInfo['files'][$contadorArray]['url'] = "/upload/imagem/".$registro['imgUrl'];
		$arrayInfo['files'][$contadorArray]['thumbnailUrl'] = "/upload/imagem/thumbnail/".$registro['imgUrl'];
		$arrayInfo['files'][$contadorArray]['deleteUrl'] = "/common/lib/multiple-upload/?file=".$registro['imgUrl'];
		$arrayInfo['files'][$contadorArray]['deleteType'] = "DELETE";
		
		$contadorArray++;
	}
}

echo json_encode($arrayInfo);

[William Bruno 1501]

Está em array agora:

 

"crop":[{"name":"top-left","selected":"true"},{"name":"top","selected":"false"},{"name":"top-right","selected":"false"},{"name":"left","selected":"false"},{"name":"center","selected":"false"},{"name":"right","selected":"false"},{"name":"bottom-left","selected":"false"},{"name":"bottom","selected":"false"},{"name":"bottom-right","selected":"false"}],

viu o [], o crop é um array. Objeto seria se o crop fosse um {}

[Maykel-ctba 233]

Sim sim!

Estranho que nem mexi no jeito que foi gerado o JSON o.O

 

Ahhh acho que já sei. O jeito que eu gerava o $options estava diferente. Acho que gerava um array associativo, e quando convertia pra JSON, transformava em objeto os coisos alí do JSON.

 

Muito obrigado, @William! Mais uma vez sendo paciente comigo :)