Estoy teniendo problemas con json. aquí está mi lista.js. de todos modos estoy usando el motor de plantillas html json2html.js.

var mylist = [
{ "name": "Pizza", "pic":"pizza.jpg", "type":"Food", "desc":"Bla bla","page":"pizza.html"},
{ "name": "Donut", "pic":"Donut.jpg", "type":"Food", "desc":"Bla bla.","page":"donut.html"},];

var rule_list = 
    {"tag": "li", "children": [
        {"tag":"a","href":"src/$(page)",},
        {"tag":"img","src":"res/i/${pic}","html":""},
        {"tag":"div","class":"li-title","html":"${name}","children":[
        {"tag":"p","html":"${type}","children":[
              {"tag":"br","html":"${desc}"}
            ]}
        ]}
]};

var content_list = json2html.transform(mylist,rule_list);
document.write('<ul id="search_list" class="listview">'+ content_list + '</ul>');

Y este es mi html

<!DOCTYPE html><html><head><title> test </title>
   <script type="text/javascript" src="../js/json2html.js"></script>
   <script type="text/javascript" src="../js/jquery.js"></script>
</head><body onload="loaded()">
   <div id="mycontent">
<script type="text/javascript" src="fb-res.js"></script>
   </div>
</body>

¿Cómo puedo agregar <a href="...html"> para cada <li> generado por json? Lo he intentado anteriormente y el enlace no aparece.

Perdón por mi mal ingles. Gracias chicos

0
user3408707 5 sep. 2014 a las 15:05

3 respuestas

La mejor respuesta

He encontrado el truco simple, tan simple. funciona como un encanto y de repente me reí. La solución simple es que tenemos que agregar algunos a.divclass y hacer que se pueda hacer clic. ponlo en json.

El CSS

a.page-link{
  z-index:2; /* Must above the <li> */
  position:absolute;
  width:100%;
  min-height:95px; /* depend on <li> height */
  height:100%; /* use it when each <li> have different height */
}

El JSON (Use el motor de plantillas json2html)

var mylist = [
    { "name": "Pizza", "pic":"pizza.jpg", "type":"Food", "desc":"Bla bla.", "link":"src/pizza.html"},
    { "name": "Donut", "pic":"donut.jpg", "type":"Food", "desc":"Bla bla.", "link":"src/donut.html"},
];

var rule_list = 
        {"tag": "li", "children": [
            {"tag":"a","href":"${link}","class":"page-link"},
            {"tag":"img","src":"res/i/${pic}","html":""},
            {"tag":"div","class":"li-title","html":"${name}","children":[
            {"tag":"p","html":"${type}","children":[
                  {"tag":"br","html":"${desc}"}
                ]}
            ]}  
        ]};

var content_list = json2html.transform(mylist,rule_list);
$('#page').html('<ul id="search_list" class="listview">'+ content_list + '</ul>');

document.write(''+content_list+'');

El HTML

<!DOCTYPE html><html><head><title> test </title>
   <script type="text/javascript" src="../js/json2html.js"></script>
   <script type="text/javascript" src="../js/jquery.js"></script>
</head><body onload="loaded()">
   <div id="mycontent">
<script type="text/javascript" src="fb-res.js"></script>
   </div>
</body>

Espero que este simple truco pueda ayudar a todos los que tienen el mismo problema conmigo. Cómo crear un hipervínculo para cada dato json.

0
user3408707 8 sep. 2014 a las 04:59

Para su información, su transformación es incorrecta, cambie $ (página) a $ {página} y debería funcionar bien

var rule_list = 
{"tag": "li", "children": [
    {"tag":"a","href":"src/${page}",},
    {"tag":"img","src":"res/i/${pic}","html":""},
    {"tag":"div","class":"li-title","html":"${name}","children":[
    {"tag":"p","html":"${type}","children":[
          {"tag":"br","html":"${desc}"}
        ]}
    ]}
]};
0
Chad Brown 30 sep. 2014 a las 05:03

Supongo que puedes hacerlo así:

// Add the list to the body
var content_list = json2html.transform(mylist,rule_list);
var list = $("<ul />").attr('id', 'search_list').addClass("listview").html(content_list);
$("body").append(list);

// Add links
$.each($("#search_list").children(), function(i, item) {
    var link = $("<a />").attr("href", mylist[i].name.toLowerCase() + ".html");
    $(this).append(link);
});

El método $("#search_list").children() busca todos los elementos li en la lista y agrega el enlace apropiado.

0
Adriien M 5 sep. 2014 a las 12:24