If you went through the developer’s guide, you might have
come across two types of JavaScript objects, they can cause a little bit of
confusion, especially the ones with the same name (like the two Place objects), although they are in different namespaces. So let’s
take a look at the two types:

Headless API
objects : They are the ones with the information (the data) that
will be displayed. There are mainly three of them: Place,
Media
and Review.

And you’ll receive them as jSon objects, so when you read something about data,
or about a jSon object we are referring to one of these objects.

In the documentation you can see other objects in the
Headless API, but they are essentially combinations of these three.

Now that we know them, let’s use them:

This piece of code will put the names of every place we get
from the search. The search will be run around the searchCenter (Berlin in this
case), and with the term that we provide (pizza in this case). You can change
the location and search term as you please.

<div id="results"></div>

<script>

        var term="pizza";

       

        var searchCenter = {

                    latitude: 52.516274,

                    longitude: 13.377678

                }; //Berlin   

       

       

        nokia.places.searchManager.findPlaces({

            searchTerm: term,

            onComplete: function(data, status){

                // data is an array of searchResult objects

                var content = "<ul>";

                for(i in data.results)

                        content+=
"<li>"+
data.results[i].place.name;

       

                content+="</ul>";

                document.getElementById("results").innerHTML=content;

            },

            searchCenter: searchCenter

        });

</script>

 

Like it’s said on the documentation the search
results are just an array of objects with two elements in each object:  distance, and the previously mentioned Place
object, that holds the information for each place that the search has found.
As you saw the headless API just gives you the raw data, so the format and
behavior of the final web page had to be coded by us, although in this example
it was only adding a list of names, you can complicate it as much as you want.

Finally we can take a look at the Place object. But rather
than looking through the documentation sometimes is better to “see” the object
for yourself.

To see an example of the place
object use the “load data” on the Headless
API data fetch example and you will see the full detail of the object
corresponding to the headless API Place object.

 

 

In my case this headless data fetch example has been
surprisingly useful, it can ever be faster than using the console.log on
firebug, and setting a break point, I hope you’ll find it useful too.

The other type of JavaScript objects are the UI Widgets:

UI
Widgets: these objects are in charge of rendering. Essentially, they will
render (the data) somewhere in your web page (target element) ,
and they will do it in a certain way (template).

UIWidget ->  RENDER (data,
target, template);

The data will be one of the previously mentioned Headless
API objects.

The target can be any html element.

The template might be the more confusing thing here. It is
used to tell the widget how to render the data, by “how to” meaning the html
structure that will show up in the final web page.

There are three of them: Place,
PlaceList
and Searchbox.
And are the ones that you see all the time declared in the getting started and
developer’s guide examples. A note: actually each one is a subclass of the  Widget object.

As I told you before, we have two kinds of place objects, so
it’s important to know if we’re dealing with the headless API object or the UI
Widget in order to avoid confusion.
Here are examples of definition for both Place objects:

Headless API:

var pp = new nokia.places.objects.Place();

UI Widget:

 

 

var pp = new nokia.places.Place ({       
   targetNode: 'detail',       
   template: 'reviewsAndGallery',       
   events: [  
           {
               rel: 'eventGal',
               name: 'click',
               handler: function (jsonObj) {pp.setPlaceId(jsonObj.placeId);}
           }      
    ]
});

Usually you’ll only need to declare the UI Place Widget
objects, because the Headless API Place objects will be given to you by the
Headless API.

 

---