如何提取/获取要显示的xml属性值

时间:2016-06-20 10:14:22

标签: jquery xml weather-api

我正在尝试在我的应用程序中集成开放天气api ,我已经调用了天气api并且它返回了xml响应。但是当我试图获取值时,它会像未知错误一样抛出错误。

我的代码是:

js代码:

<script type="application/javascript">

        jQuery(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "http://api.openweathermap.org/data/2.5/forecast/daily?q=Hyderabad,IN&mode=xml&appid=c9d49310f8023ee2617a7634de23c2aa",
                dataType: "xml",
                success: function(data) {
                    /* handle data here */
                    console.log(data);

                    //$('<p>Text</p>').appendTo('#weather_report');

                    /*var wrapper = $("#weather_report");
                     wrapper.empty();
                     wrapper.append("<div class='city'> <p>Place: " + data.city.name + "</p><p>Country: " + data.city.country + "</p></div>");
                     wrapper.append("<div class='day_1'> <p>Place: " + data.city.name + "</p><p>Country: " + data.city.country + "</p></div>");*/

                },
                error: function(xhr, status) {
                    /* handle error here */
                }
            });
        });

    </script>

上面的代码返回格式:

enter image description here

您能否建议我如何显示xml值?

1 个答案:

答案 0 :(得分:1)

您可以在页面上创建隐藏的div,然后使用JQuery.load方法将XML元素插入到div中。完成后,您可以像使用HTML一样遍历和修改它。见下面的代码:

$('#hiddenDivId').load('xmlURL');

这会将XML插入hiddenDiv。

例如,如果你有这个XML:

<foos>
  <foo>
    <prop1>Test</prop1>
    <prop2>Test1</prop2>
  </foo>
</foos>

然后你做$('#hiddenDivId').load('foos.xml');

HTML元素'hiddenDivId'如下所示:

<div id="hiddenDivId">
  <foos>
    <foo>
      <prop1>Test</prop1>
      <prop2>Test1</prop2>
    </foo>
  </foos>
</div>

之后,您可以像这样迭代'foo'元素:

$('#hiddenDivId foos foo').each(function(){
  //you can then do whatever you want with the current 'foo'.
  //to access it from the loop, use the $(this) keyword
  //you can access the properties using $(this).children('property name')
  //and it will treat it like a HTML element
})