Question

I have got below JSON response from my ASPX page back to my client page. Now I want to read the values from it and want to generate the HTML

jsonData ={ "tnf": { "ci": [ {"atit": "Australia Pass", "img": "\/fr\/english\/Images\/EN_Fly_to_Rio_de_Janeiro_v1_185_tcm233-658117.jpg", "sop": "\/fr\/english\/destinations_offers\/special_offers\/mysite_visit_australia_pass\/mysite_visit_australia_pass.aspx" } ],  "elt": [ {"t": "sfp", "value": "More special fares" } ],  "f": [ { "a": [ {"c": "Hamburg", "p": "from GBP 469*", "pm": "id=744431#744431", "t": "sfp" }, {"c": "Dubai", "p": "from GBP 559*", "pm": "id=744432#744432", "t": "sfp" }, {"c": "Thiruvananthapuram", "p": "from GBP 559*", "pm": "id=744433#744433", "t": "sfp" }, {"c": "Johannesburg", "p": "from GBP 559*", "pm": "id=744434#744434", "t": "sfp" }, {"c": "Beijing", "p": "from GBP 1,780*", "pm": "id=744435#744435", "t": "sfp" }, {"c": "Guangzhou", "p": "from GBP 469", "pm": "pub=\/fr\/english&pageurl=\/IBE.aspx&section=IBE&TID=SB&resultby=2&j=f&showpage=true&seldcity1=LHR&selacity1=JNB&selddate1=08%20Dec%2011&seladate1=09%20Dec%2011&bsp=Special+Fares+Widget&selcabinclass=0&showsearch=true", "t": "ffp" }, {"c": "Manila", "p": "from GBP 559*", "pm": "id=744437#744437", "t": "sfp" }, {"c": "Kuala Lumpur", "p": "from GBP 559*", "pm": "id=744438#744438", "t": "sfp" } ],  "d": [ {"t": "sfp", "value": "From London Heathrow (LHR)" } ] } ],  "nof": [ { "a": [ {"class": "bodyLink", "href": "\/sn\/english\/destinations_offers\/special_offers\/special_offers.aspx", "title": "Special Offers", "value": "Special Offers" } ],  "value": [ "We don’t have any Special Fares at the moment. Please check again another time, or see our current", "." ] } ], "tc": "Conditions apply for each fare.  Dublin commence from  9th January 2012.",  "u": [ {"ffp": "\/SessionHandler.aspx", "ffpm": "pageurl=\/IBE.aspx&pub=\/fr\/english&section=IBE&j=f&bsp=Special+Fares+Widget", "ot": "\/fr\/english\/destinations_offers\/special_offers\/mysite_visit_australia_pass\/mysite_visit_australia_pass.aspx", "sfp": "\/fr\/english\/destinations_offers\/special_offers\/special_fares\/special_fares.aspx" } ] }}

Please suggest how can I read it show that I can easily add it to my HTMLs

EDIT:

This the Jquery code which I am using to get these values:

$(document).ready(function() {
        $('#btnSearch').click(function() {

            var strInput = "";
            var strSearchType = $('#ddnSearchType').val();
            strInput = strInput + "?q=" + strSearchType;
            var serviceReq = "http://localhost:2853/jsonproxy/jsonprxy.aspx";

            $.ajax({
                url: serviceReq + strInput,
                dataType: "jsonp",
                jsonpCallback: "processJsonData",
                success: function(data, textStatus, jqXHR) {
                    // don't do anything here, since the processing happened in callback function
                },
                error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); }
            });
        });
        function processJsonData(data) {
            alert(data);
            $.each(data, function(i, tnf) {
                alert(tnf.nof[0].a[0].href)
                alert(tnf.elt[0].value)
                alert(tnf.f[0].a.c);
                $.each(tnf.f[0].a, function(j, adata) {
                    alert(adata.c);
                    alert(adata.pm)
                });

            });
        }
    });

I can see three GET variables in the HTTPFox tool,

q   even
callback    processJsonData
_   1326530518049

Its giving parser error as well as “processJsonData” function is not recognized.

and the result which is returned back from my CS is as above.

Below is code which I am using to get the JSON

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml;
using System.IO;
using System.Runtime.Serialization.Json;

public partial class jsonProxy : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string strResult = "";
        string strSearch = "";
        try
        {
            if (Request.QueryString.Count != 0 && Request.QueryString["q"] != string.Empty)
            {
                strSearch = Request.QueryString["q"];
            }
            strResult = performSearch(strSearch);
        }
        catch
        {
            strResult = performSearch("");
        }
        Response.Clear(); //optional: if we've sent anything before
        Response.ContentType = "text/html"; //must be 'text/xml'
        Response.ContentEncoding = System.Text.Encoding.UTF8; //we'd like UTF-8

        Response.Write("jsonData =" + strResult + "");
        Response.End(); //optional: will end processing

    }
    private string performSearch(string strSearch)
    {
       string returnStr = "";
        XmlDocument docXml = new XmlDocument();
        docXml.Load("xml/SpecialFares.xml");
        returnStr = XmlToJson.XmlToJSON(docXml);
        return (returnStr);
    }
}

Thanks

Best Regards,
MS

Answer 1

What you’ve got there isn’t JSON, but javascript. To use this, you want to add a:

<script src="myscript.js" ></script>

to your html. Then jsonData will be a global object, so you can simply refer to:

alert(jsonData.tnf.ci[0].atit)

which will alert Australia Pass.

More likely, what you want to do is to remove the jsonData= part of the returned string. Then you can handle the data with a typical jQuery ajax request:

$.ajax({
  url: "your_js_url.aspx",
  dataType: "json",
  success: function(data, textStatus, jqXHR) {
    // process the js object data that will contain your returned data
    },
  error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); }
});

More details can be found on jQuery’s ajax documentation: http://api.jquery.com/jQuery.ajax/

To understand the difference between json and jsonp, Wikipedia JSONP to the rescue:

Requests for JSONP retrieve not JSON, but arbitrary JavaScript code.
They are evaluated by the JavaScript interpreter, not parsed by a JSON
parser.

This StackOverflow question also addresses it: What is JSONP all about?.

So with JSON, one returns the raw data in JSON format, while with JSONP one returns a script that will be evaluated by the browser’s javascript interpreter. What one generally does is to make a function call in the script. In your case, you might have your apsx page return:

processJsonData( { { /*your json data here*/ } } );

The thing is, JSON data is valid Javascript notation, which is why JSON and Javascript play together so nicely.

Now, in your code you need to implement the processJsonData function:

function processJsonData(data) { ... }

Note that for this to work with jQuery, you need to change your ajax call:

$.ajax({
  url: "your_js_url.aspx",
  dataType: "jsonp",
  jsonpCallback: "processJsonData",
  success: function(data, textStatus, jqXHR) {
    // don't do anything here, since the processing happened in callback function
  },
  error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); }
});

Now as to how to process the data in your processJsonData function, well, you’re receiving your data as a javascript object, and how you map that to HTML depends on the data and how you want it to appear. I’m afraid your json is a little too complex for me to be able to guess what you’re wanting to do with it.

To call the processJsonData function with your data, change your .cs line:

    Response.Write("jsonData =" + strResult + "");

to:

    Response.Write("processJsonData(" + strResult + ");");