[Question] Ho to render this case

[enricovittorini]

Hello all, on NodeJs i would need to render this data

data = 
[
  { type: "name", "value": "Summer" },
  { type: "surname", "value": "Winter" },
]

into a div and ul elements with name.

<div id="my_list">
    <ul>
        <li>name: Summer</li>
        <li>surname: Winter</li>
    </ul>
</div>

the difficulty i have is to include the data elements into

and
tags using j2h.

thanks for your help!

[moappi]

I'd look at the docs here as this is a pretty simple implementation with json2html

<div id="my_list">
    <ul></ul>
</div>

$("#my_list ul").json2html( data, {"<>":"li","text":"${type}: ${value}"});

[enricovittorini]

thanks @moappi , i looked at it, but i guess that the $("#my_list ul") required the "ul" element to be present in the DOM right?

i tried the example:

let template = {'<>':'li','html':[
    {'<>':'span','html':'${name} (${age})'}
]};

let data = [
{'name':'Bob','age':40},
{'name':'Frank','age':15},
{'name':'Bill','age':65},
{'name':'Robert','age':24}
];

$('ul').json2html(data,template);

and nodejs give me an error

$('ul').json2html(data,template);
^

ReferenceError: $ is not defined

i would need to buld the ul element with the template. is this possible?

[moappi]

$(..) is jquery syntax. So that would assume that you're using jquery on the client. If you're using node you can build the ul element with the template like so

let template = {"<>":"div","id":"my_list","html":[
    {"<>":"ul","html":[
            {"<>":"li","obj":function(){return(this.data);},"text":"${type}: ${value}"}
    ]}
  ]};

let data = [
  { type: "name", "value": "Summer" },
  { type: "surname", "value": "Winter" },
];

let html = json2html.render({"data":data},template);

the "obj" property will map the data object to the li element (effectively repeating it for every object in the data array).

I would download and go over the examples to get a better understanding on json2html can be used https://github.com/moappi/json2html/tree/master/examples

[enricovittorini]

@moappi thanks a lot., it works!

just another question if my data is: let data = [ { "name": "mike" "surname": "doe" } ];

and i do not know they "key" and the associated value". how can i generate a html template that is

<div id="properties">
<ul>
<li id = "name"> "mike</li>
<li "id="surname"> doe </li>
</ul>
</div>

in general, when i do not know the "key":"value", how can i generate an html that uses the key and the value ? thanks!

[moappi]

Typically when creating a template you'll need to know the structure of the data (ie the key names). You can use json2html to render any json object, I'd recommend looking at this project for more info on how to do that