extract values from json string via javascript

Question

I have a webservice that returns results in JSON In Javascript I want to loop through these results so I can display them to the user.

I have defined the following classes:

Public Class PointsOfInterest
    Public Property hotspots() As List(Of Hotspot)
        Get
            Return m_hotspots
        End Get
        Set(value As List(Of Hotspot))
            m_hotspots = value
        End Set
    End Property
    Private m_hotspots As List(Of Hotspot)
    Public Property errorString() As String
        Get
            Return m_errorString
        End Get
        Set(value As String)
            m_errorString = value
        End Set
    End Property
    Private m_errorString As String
    Public Property errorCode() As Integer
        Get
            Return m_errorCode
        End Get
        Set(value As Integer)
            m_errorCode = value
        End Set
    End Property
    Private m_errorCode As Integer
End Class

Public Class Hotspot
    Private m_id As String
    Public Property id() As String
        Get
            Return m_id
        End Get
        Set(value As String)
            m_id = value
        End Set
    End Property

    Public Property anchor() As anchor
        Get
            Return m_anchor
        End Get
        Set(value As anchor)
            m_anchor = value
        End Set
    End Property
    Private m_anchor As anchor


    Public Property text() As textprop
        Get
            Return _text
        End Get
        Set(value As textprop)
            _text = value
        End Set
    End Property
    Private _text As textprop


    Public Property imageURL() As String
        Get
            Return _imageURL
        End Get
        Set(value As String)
            _imageURL = value
        End Set
    End Property
    Private _imageURL As String

    Public Property actions() As List(Of action)
        Get
            Return _actions
        End Get
        Set(value As List(Of action))
            _actions = value
        End Set
    End Property
    Private _actions As List(Of action)

End Class

Public Class anchor
    Public Property geolocation() As geoloc
        Get
            Return _geoloc
        End Get
        Set(value As geoloc)
            _geoloc = value
        End Set
    End Property
    Private _geoloc As geoloc

End Class

Public Class textprop
    Public Property title() As String
        Get
            Return _title
        End Get
        Set(value As String)
            _title = value
        End Set
    End Property
    Private _title As String
    Public Property description() As String
        Get
            Return _description
        End Get
        Set(value As String)
            _description = value
        End Set
    End Property
    Private _description As String
    Public Property footnote() As String
        Get
            Return _footnote
        End Get
        Set(value As String)
            _footnote = value
        End Set
    End Property
    Private _footnote As String

End Class


Public Class geoloc
    Public Property lat() As String
        Get
            Return _lat
        End Get
        Set(value As String)
            _lat = value
        End Set
    End Property
    Private _lat As String
    Public Property lon() As String
        Get
            Return _lon
        End Get
        Set(value As String)
            _lon = value
        End Set
    End Property
    Private _lon As String
End Class

Public Class action
    Public Property uri() As String
        Get
            Return _uri
        End Get
        Set(value As String)
            _uri = value
        End Set
    End Property
    Private _uri As String

    Public Property label() As String
        Get
            Return _label
        End Get
        Set(value As String)
            _label = value
        End Set
    End Property
    Private _label As String
    Public Property contentType() As String
        Get
            Return _contentType
        End Get
        Set(value As String)
            _contentType = value
        End Set
    End Property
    Private _contentType As String
    Public Property method() As String
        Get
            Return _method
        End Get
        Set(value As String)
            _method = value
        End Set
    End Property
    Private _method As String
    Public Property activityType() As Integer
        Get
            Return _activityType
        End Get
        Set(value As Integer)
            _activityType = value
        End Set
    End Property
    Private _activityType As Integer
    Public Property showActivity() As Boolean
        Get
            Return _showActivity
        End Get
        Set(value As Boolean)
            _showActivity = value
        End Set
    End Property
    Private _showActivity As Boolean
    Public Property activityMessage() As String
        Get
            Return _activityMessage
        End Get
        Set(value As String)
            _activityMessage = value
        End Set
    End Property
    Private _activityMessage As String

End Class   

I return these via a webservice in JSON: http://www.wunderwedding.com/weddingservice.svc/api/?t=1&cid=1&pid=6&lat=52&lng=5&d=10000&city=nijmegen&field1=0&field2=0&field3=0&field4=0&hasphoto=0&hasvideo=0&minrating=0&lang=nl

Now if I for example want to read the tel property of the 3rd result (in this case 0348551532) How would I go about that? Is it something like XSLT, where I can work with expressions to make selections?

Answer 1

In JavaScript, I'm assuming your using something like jQuery or ExtJS, that supports AJAX. Once you have the JSON on the client side, you'll decode the web service result (using Ext.decode or eval("") if your reading the JSON without a special toolkit).

Once you have the JSON decoded, it's readily available in JavaScript.

Example:

var json = [Function that decodes JSON text];
var uriInfo = json.hotspots[2].actions[1].uri;

If you are using FireFox, you can install an addon called FireBug. This will allow you to work through this type of thing. With that tool, you can call console.dir(json); in JavaScript and see the entire structure as seen by javascript, etc.