Introducing nexacro.DomParser Object

Create the XML string as the DOMDocument object. You can use it when you receive XML data and need to represent it in a different format.

Connecting XML Format Open API & Displaying in Grid Component

It displays weather information for 5 days in the selected city using Open API that provides weather information for each city.

Example

If you select the desired item from the list of preset city codes, then weather information for 5 days after the current time will be displayed. Depending on the selected country, it displays the weather condition description as a tooltip in Korean, Japanese, and English.

sample_nexacro_domparser_01.xfdl

Core features used in the example

onreadystatechange

Sets the callback function to process the result according to the response status of the call requested by the XMLHttpRequest object. In the example, the weather API address is called and the XML value received is processed in the nexacro.DomParser object.

parseFromString

Converts the XML string into the DOMDocument object. The properties or methods of the object can vary depending on the execution environment. The example below uses the function checked in NRE, IE11, and Chrome.

How to implement an example

The corresponding column data is used only when calling the API.

Data is added during processing after the API call.

Set the displaytype property value to "number" for the 3 columns of temperature, pressure, humidity, and set the displaytype property value to "imagecontrol" for the icon column, "bind:status" for the tooltiptext property value, and "fixaspectratio" for the imagestretch property value.

this.Grid01_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var id = this.Dataset01.getColumn(e.row, 2);
	var lang = this.Dataset01.getColumn(e.row, 4);
	this.fn_getWeatherInfo(id, lang);
};

If you do not specify the value for the mode property, then data is received in JSON format. Since the example processes XML data, set the value of the mode property to "xml". If you set the lang property, then you can get data values in that language.

var appid = "[app id]";

this.fn_getWeatherInfo = function(id, lang)
{
	var objXhr = new XMLHttpRequest();
	objXhr.onreadystatechange = this.XHR_onreadystatechange;
	objXhr.open("POST", "https://api.openweathermap.org/data/2.5/forecast?mode=xml&units=metric&appid="+appid+"&id="+id+"&lang="+lang);
	objXhr.send();
};

var that = this;

this.XHR_onreadystatechange = function()
{
	if(this.readyState == 4)
	{
		that.fn_setData(this.responseText);
	}
}

To call the function to process data, specify and use this (Form) variable as the global variable. Inside the function below, this indicates the XMLHttpRequest object.

Use the parseFromString method of the DomParser object to convert the XML body transmitted in the form of the character string into the object form, and access the necessary data.

this.fn_setData = function(strXML)
{
	var domDoc;
	var objDom = new nexacro.DomParser();
	domDoc = objDom.parseFromString(strXML);

	var timezone = domDoc.getElementsByTagName("timezone")[0].childNodes[0]
	timezone = timezone.data;
	var domElement = domDoc.getElementsByTagName("forecast")[0].childNodes;
	var domCnt = domElement.length;
	var msg="";
	
	this.Dataset00.set_enableevent(false);
	this.Dataset00.clearData();
	for(var i=0;i<domCnt;i++)
	{
		var rIdx = this.Dataset00.addRow();
		var domElement = domDoc.getElementsByTagName("forecast")[0].childNodes[i];

		this.Dataset00.setColumn(rIdx, 0, this.fn_localDate(domElement.getAttribute("to"), timezone)); // to date
		this.Dataset00.setColumn(rIdx, 1, domElement.getElementsByTagName("symbol")[0].getAttribute("name")); // status
		this.Dataset00.setColumn(rIdx, 2, domElement.getElementsByTagName("temperature")[0].getAttribute("value")); // temperature 
		this.Dataset00.setColumn(rIdx, 3, domElement.getElementsByTagName("pressure")[0].getAttribute("value")); // pressure  
		this.Dataset00.setColumn(rIdx, 4, domElement.getElementsByTagName("humidity")[0].getAttribute("value")); // humidity  
		this.Dataset00.setColumn(rIdx, 5, "http://openweathermap.org/img/wn/"+domElement.getElementsByTagName("symbol")[0].getAttribute("var")+".png");
	}
	this.Dataset00.set_enableevent(true);
	this.Grid00.scrollTo(0,0);
	
};

The API throws the date value based on UTC. The time needs to be adjusted according to the time zone of the selected city.

this.fn_localDate = function(strDate, timezone)
{
	var d = new nexacro.Date(strDate);
	d.addSeconds(Number(timezone));
    var year = d.getFullYear().toString().padLeft(4, "0");
    var month = (d.getMonth()+1).toString().padLeft(2, "0");
    var day = d.getDate().toString().padLeft(2, "0");
	var hour = d.getHours().toString().padLeft(2, "0");
	var minute = d.getMinutes().toString().padLeft(2, "0");
	return year+"/"+month+"/"+day+" "+hour+":"+minute;
}