Displaying JSON Data On A Website

Question

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 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!

score 1 · Answer 1 · edited Jun 20 '12 at 01:26

1

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.

edited Jun 20 '12 at 01:26

Jon Lin

142,182
29
220
220

answered Jun 19 '12 at 23:09

Mblaeser

11
1

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

Take a look at this post

Display JSON as HTML

edited May 23 '17 at 10:30

Community

1
1

answered Sep 20 '10 at 17:56

fehays

3,147
1
24
43

score 0 · Answer 3 · answered Sep 20 '10 at 18:02

0

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...

answered Sep 20 '10 at 18:02

djn

3,950
22
21

score 0 · Answer 4 · answered Sep 20 '10 at 19:09

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);
                }
            });

Displaying JSON Data On A Website

4 Answers4