Displaying JSON Data On A Website

Looking for the best and most simple way to embed and style the data returned from a JSON call, on another web page. Ideally I would like to do this with some sort of simple embed code that someone can place on there page. If not I would like to provide some开发者_StackOverflow中文版 php code (perhaps along with some css and jQuery) that would allow the user to style the information. themselves. Any ideas would be much appreciated.

Thanks!

Take a look at this post

Display JSON as HTML

You could try using this JSON Data website which is still in beta but it lets you input and store your data and then gives you an embed code to display your data on any webpage.

The simplest of all embed codes is to supply the html for an iframe - pointing to a (X)HTML document with its own CSS and eventual scripts. Anything else can sure be done, but I wouldn't swear on the simple part...

This is a snippet from an App I working on, I get some data from PHP (JSON), I use "function log" to put the table into a div, you can customize a CSS (div class="yourCSSClass") to get a fancy div.

 function log(message, div) {
                    switch(div){

                        case 1: $("#log").empty();
                                $("<div/>").html(message).prependTo("#log");
                                $("#log").attr("scrollTop", 0);
                                break;

                        case 2: $("#log2").empty();
                                $("<div/>").html(message).prependTo("#log2");
                                $("#log2").attr("scrollTop", 0);
                                break;

                    }


        }

$('#item').autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "itemsJson.php",
                        dataType: "json",
                        data: {
                            term: request.term,
                        },
                        success: function(data) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.label,
                                    value: item.value,
                                    id: item.id,
                                    name: item.name,
                                    location: item.location,
                                    rfidpic: item.rfidPicture
                                }
                            }))
                        }
                    })
                },
                select: function(event, ui) {

                           log(ui.item ? ( "<table border=0><tbody><tr><td colspan='3'><b>" + ui.item.id + "</b></td><td></td><td><img src='" + ui.item.rfidpic + "'  style='margin: 0 right; width=" + "'60'" + " height=" + "'60'" + "'/></td></tr>"  
                                                + "<tr><td colspan='2' align='center'>Name</td><td colspan='2' align='center'>Location</td></tr>"
                                                + "<tr><td colspan='2' align='center'>" + ui.item.name + "</td><td colspan='2' align='center'>" + ui.item.location + "</td></tr></tbody></table>"
                                                ) : "Please select an item" + this.id, 1);
                }
            });