Question

I’m making an ajax call to fetch json data. What I get is something like this:

{
    "footerPkg": [
        {
            "hotelRoomPrice": 100,
            "idHolidayPackage": 1,
            "OriginCity": "New York",
            "itineraryHeader": "Trip to New York",
            "name": "Holiday Package 1"
        },
        {
            "hotelRoomPrice": 50,
            "idHolidayPackage": 1,
            "OriginCity": "Los Angeles",
            "itineraryHeader": "Amazing Los Angeles",
            "name": "Holiday Package 2"
        }
    ]
}

I have to display this json array data like this:

Is there a templating engine or some other technique where I can specify the css and other html styling on the json parameters like I would apply on other html elements ?

Something like this would be great:

(assuming fragment-1 is the id for each element in the array )

data = array[0];
    <div id="fragment-1">
             <table><tr>
            <td><img src='data.image.path' alt="${data.image.altText}" title="${data.image.title}">
            <div id="overlaytextlistinglayout">
            <b><a>data.itineraryHeader</a></b><br>
            <br><a style="color: #000000 ">data.name</a>
    </div>

Answer 1

I ended up using mustache, and its been so far so good!

PS: Wanted to mark @Jon Friskics comment as the answer, but couldn’t do it.