Question

13

optimal solution to convert json object into HTML

rated 0 times [ 17] [ 4] / answers: 1 / hits: 7567 / 11 Years ago, tue, january 21, 2014, 12:00:00

My HTML page primarily displays a list of pages retrieved from server.

I chose to implement this is in two parts

Render the page without the list of pages with spinner.

After the page is loaded I am making an AJAX call to retrieve the page list as JSON

I am using jQuery as My javascript library

I get the JSON over AJAX which I need to convert into HTML and display in the page accordingly.

I have not done similar translation before so I would like to know what would be the optimal way to go ahead and transform JSON to html.

I did some research. I could see using some library or iterating each element and constructing the divs.

which would be the better one?

Sample of my JSON would be like

{

    SomeID: 12345,

    someName: somefile,

    totalPageNum: 5,

    pages: [ //Array of pages

        {

            pageFields: [ // Array of page fields

                {

                    field: {

                        id: 1,

                        type: someType,

                        name: someFieldName,

                        value: Some Field Value

                    },

                    coordinates: {

                        x: 105,

                        y: 543

                    }

                }

            ],

            somePagenumber: 1,

            somePageURLurl: /location/to/page1

        }

    ]

}

Thanks for reading!!!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rocioblancac

Add To Favorites

Follow

Total Points: 699

Total Questions: 96

Total Answers: 108

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

rocioblancac questions

1 Angular: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Mon, Dec 13, 21, 00:00, 2 Years ago

1 Bootstrap multiple file selection - show only first file

Sun, Jul 26, 20, 00:00, 4 Years ago

1 React JS How to disable zoom

Wed, Jul 22, 20, 00:00, 4 Years ago

1 React Native https axios resquest gets Network Error on Android but not iOS

Thu, Jan 16, 20, 00:00, 4 Years ago

1 Color Input in React: The format is #rrggbb where rr, gg, bb are two-digit hexadecimal numbers

Mon, Jan 6, 20, 00:00, 4 Years ago

View All

answered 11 Years ago briza · Accepted Answer

The term Optimal solution is biased.
What is a good solution for sure: Use JQuery to do it.

Example:

<!-- Include JQuery, only one time in the page header -->

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js></script>



<script>

$(document).ready(function(){

$.getJSON(/admin/json/endpoint,function(data) {         

  $.each(data.collection, function(i,e) {

  var lmod = formatDate(new Date(e[lmodified]));

  var row = <tr><td>+e[name]+</td><td>+lmod+</td>

  $(#dpub tr:first).after(row);

  });

});

</script>



<table id=dpub style=width:100%;>

 <tr>

   <th style=width:20%;>Name</th>

   <th>Last modified</th>

 </tr>

</table>

See: http://api.jquery.com/jquery.getjson/

console.log(data) can help you to understand the structure of the returned object in javascript. Open your browser javascript console to see the contents.

When things are getting complex and you don't only want to add simple rows to a table, consider to use a template engine like mustache.js