Retrieve specific data stored with JSON

Question

I've used the code posted in THIS STACKOVERFLOW POST to build a prototype of a webbapp, but I can't make the second page show me the data with the format I want.

The code shows me the second page with all the data in a grid format, but I want to know how to make specific data with different formats (bold, italic, color).

For example, one string that I use is a "image.jpg" text to load an image of the user.

I've modified the first part of the code to:

$.each(info, function (i, valor) {

li += '<li><a href="#" id="' + i + '" class="info-go" data-transition="slide"><img src="img/'+ valor.foto +'"><h2><i>' + valor.cientifico + '</i></h2><p><b>Familia:</b> <i>'+ valor.familia +'</i> | <b>Subfamilia:</b> <i>'+ valor.subfamilia +'</i></p></a></li>';

});

to add specific values and apply different format (familia, subfamilia) and to insert the picture with the "foto" value.

Then the code continues:

    $("#lista").append(li).promise().done(function () {

        $(this).on("click", ".info-go", function (e) {
            e.preventDefault();

            $("#resultado").data("info", info[this.id]);

            $.mobile.changePage("#resultado");
        });

        $(this).listview("refresh");
    });
});

$(document).on("pagebeforeshow", "#resultado", function () {

    var info = $(this).data("info");

    var info_view = "";

    for (var key in info) {

        info_view += '<div class="ui-grid-a"><div class="ui-block-a"><div class="ui-bar field" style="font-weight : bold; text-align: left;">' + key + '</div></div><div class="ui-block-b"><div class="ui-bar value" style="width : 75%">' + info[key] + '</div></div></div>';
    }

    $(this).find("[data-role=content]").html(info_view);
});

I know that the for (var key in info) is not what I'm looking for, but I don't know what code I have to use because I'm too new to unsderstand how to do it. How can I accomplish this? The code next to info_view is HTML, right, but if I replace + key + with + familia + for example this doesnt works like before.

My question is how can I make to retrieve an specific data (for example the foto value) of the selected item listed in the first page? I want to be able to select wich items use. For example, I wanna make the id value invisible for the user, make the id value invisible, the name value in bold, and so on

Hope I was enough clear, sorry for my limited english and coding knowledge

Answer 1

Finnaly I've solved my own question. For reference, what I do was deleted the

for (var key in info) {

and inside the info_view += part i've used info['value'] for each item I want to manipulate.

Hope this helps someone else.