Sunday, April 20, 2014

Syntax for accessing Json objects with “–” orspace in key

I  recently had to access Json object returned by Wikipedia with a key  name “query-continue”.

This can be done by using   ECMAscripts "bracket notation" 

response.data['query-continue'].categorymembers.gcmcontinue

refer

access javascript object with space in key

Thursday, April 17, 2014

angularjs page slider

Needed a sliding panel like the ones in Ipad for cascading dropdown. I wanted a button to open the dropdown panel and the panel to close after the last dropdown finished.

I used the nice directive provided by

Daniele Piccone in ng-pageslide

I have given below some code snippets to achieve this using the ng-pageslide directive.

<a  class="btn btn-primary"  ng-click="drop_down_open=true">Open</a>

<pageslide ps-open="drop_down_open" pageslide="left" ps-size="550px" ps-speed="0.5" ps-target="#div_dropdown"></pageslide>

<div id="div_dropdown">

<a ng-click="drop_down_open=false" class="btn btn-primary" >Close</a>
<div data-ng-include data-src="'pages/dropdown.html'">
</div>



In the controller to close or open



$scope.drop_down_open=false;

$scope.drop_down_open=true;

Saturday, March 15, 2014

Angulajs, Nodejs, Node-webkit articles coming

Have been busy with other projects.
Angularjs, Nodejs, Node-webkit are very exciting developments which happened in the last few years.
Some of the applications I did with Silverlight will be lot simpler with these.
Look for more articles about these technologies here.
 

Friday, September 28, 2012

Jquery cross domain AJAX requests and HTML parsing list of image src using JQUERY MAP

Recently I have been working with Wikipedia, Wikimedia and had to do AJAX requests and parsing the returned HTML.

Javascript and JQUERY have problems when you try an AJAX query to cross-domain sites. I read the following article by Micahs

Making Cross Domain jQuery AJAX Calls and followed the method suggested using YQL and seems to work fine. I have repeated below the code mentioned in the article for reference.

//feel free to add querystring vars to this
var myurl="http://www.example.com/get-post.ashx?var1=var1value&callback=?";
//make the call to YQL
$.getJSON("http://query.yahooapis.com/v1/public/yql?"+
"q=select%20*%20from%20html%20where%20url%3D%22"+
encodeURIComponent(myurl)+
"%22&format=xml'&callback=?",
function(data){
if(data.results[0]){
//this data.results[0] is the return object you work with,
//if you actually want to do something with the returned json
alert(data.results[0]);
} else {
var errormsg = '
Error: could not load the page.
'
;
//output to firebug's console
//use alert() for other browsers/setups
console.log(errormsg);
}
}
);



I have given below an example of parsing all the image source in a list of images.



The list item code snippet is given below



    <div class="thumb" style="width: 150px;"><div style="margin:15px auto;"><a href="//commons.wikimedia.org/wiki/File:Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg" class="image"><img alt="Adrien Ysenbrandt - Virgin and Child with Two Angels in a Landscape - Walters 37266.jpg" src="//upload.wikimedia.org/wikipedia/commons/thumb/4/49/Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg/102px-Adrien_Ysenbrandt_-_Virgin_and_Child_with_Two_Angels_in_a_Landscape_-_Walters_37266.jpg" width="102" height="120" /></a></div></div>


After alert(data.results[0]); you can do something like the following to get the  thumb html in the list:



 var thumb_array_img = $(('.thumb img'), result);


To get all the src links in an array use the JQUERY map function like the following code:



image_thumb_array = [];


image_thumb_array = $(thumb_array_img).map(function ()

                   { return $(this).attr("src"); });

Wikimedia Wikipedia parsing data and machine readable code useful links

The Wikipedia, Wikimedia API has lot of information but not well documented. I have been working with that to get some data and parse it. I found the following links very helpful.

  1. API:Main page
  2. MediaWiki API documentation page
  3. API sandbox
  4. Commons:Machine-readable data
  5. Category:Infobox templates
  6. What is the Full URL of the images returned by a wikipedia query...
  7. API:Query
  8. Call Wikipedia API using jQuery
  9. Manual:Parameters to index.php
  10. Template:Information
  11. API:Properties
  12. API:Lists

Wikipedida Wikimedia query returns 403 forbidden

I had the following webclient request 
 WebClient serviceRequest = new WebClient();
var JsonResponse = serviceRequest.DownloadString(new Uri(urselected));

Where urselected was the REST query string. The query worked fine in my browser but returned 403 forbidden error. I found the following post which addresses the problem:

Wikipedia query returns error 403

Modified my code as follows and it worked find:

WebClient serviceRequest = new WebClient();
           serviceRequest.Headers.Add("user-agent", "Silver Azure");

           var JsonResponse = serviceRequest.DownloadString(new Uri(urselected));

Friday, September 7, 2012

Wikipedia and Wikimedia commons html content

Wikipedia and Wikimedia Commons have excellent information. I am building a few applications using the information from these sites. I wanted to get some portions of the html markup, for example the image source, title, thumbnail etc. I tried the Media Wiki API and was able to get the file names by a query like this.

http://commons.wikimedia.org/w/api.php?format=xml&action=query&list=categorymembers&cmtitle=Category:Coins_in_the_Walters_Art_Museum

This produced the following output

<?xml version="1.0"?>
-<api>-<query>-<categorymembers><cm title="File:Ethiopian - Coin Depicting an Anonymous King - Walters 59793 - Obverse.jpg" ns="6" pageid="18842729"/><cm title="File:Ethiopian - Coin Depicting an Anonymous King - Walters 59793 - Reverse.jpg" ns="6" pageid="18842732"/><cm title="File:Ethiopian - One of Two Coins Depicting Ousanas and an Anonymous King - Walters 59794.jpg" ns="6" pageid="18809697"/><cm title="File:Greek - Apollo - Walters 59533.jpg" ns="6" pageid="18787772"/><cm title="File:Greek - Athena - Walters 59519 - Obverse.jpg" ns="6" pageid="18801612"/><cm title="File:Greek - Athena - Walters 59519 - Reverse.jpg" ns="6" pageid="18801616"/><cm title="File:Greek - Athena - Walters 59702 - Back.jpg" ns="6" pageid="18787788"/><cm title="File:Greek - Persephone - Walters 59693.jpg" ns="6" pageid="18787786"/><cm title="File:Greek - Tetradrachme with King Nicodemus II - Walters 59723 - Back.jpg" ns="6" pageid="18787795"/><cm title="File:Matthes Gebel - Medal of Arnold and Nicholas Wenck - Walters 59480 - Obverse.jpg" ns="6" pageid="18839416"/></categorymembers></query>-<query-continue><categorymembers cmcontinue="file|7e524f4d414e202d20434f494e2057495448204120484950504f504f54414d555320414e4420504f525452414954204f46204f544143494c494120534556455241202d2057414c54455253203539373531202d204241434b2e4a50470a524f4d414e202d20434f494e2057495448204120484950504f504f54414d555320414e4420504f525452414954204f46204f544143494c494120534556455241202d2057414c54455253203539373531202d204241434b2e4a5047|18787799"/></query-continue></api>


You can use the file name to build a url like the following to get the image info



http://commons.wikimedia.org/wiki/File:Egyptian_-_Pectoral_-_Walters_42199.jpg



However I wanted to get the title, thumbnail url etc. After some research I hit on this discussion How to get HTML content text of a Wikipedia Page (via Wikipedia API)? and then this page Manual:Parameters to index.php.



This led to the following query which gives all the relevant html markup: http://commons.wikimedia.org/wiki/Category:Coins_in_the_Walters_Art_Museum?action=render