如何按元素内容过滤解析的XML数据[jQuery]

Posted 2021-04-21

所以我有一个xml住房属性Feed [在WordPress网站上]目前非常简单，它只是收集我想要显示的字段并显示为列表[非常正常的东西]但我现在需要能够制作两个列表，一个只显示已售出的房产，一个不显示已售出的房产。目前我的代码如下：

jQuery(function( $ ){

$(document).ready(function()
{
    $.ajax({
        type: "GET",
        url: "/properties2.xml",
        dataType: "xml",
        success: parseXml
    });
});

function parseXml(xml)
{
    $("#xmlmain").html("<div id='content' data-role='listview' data-inset='true'></div>");
    $(xml).find("property").each(function() {
        $("#content").append("<div class='xmlwrapper'><div class='xmlleft'><img src='"+$(this).find('[name="Photo 1"]').text()+"'/></div><div class='xmlright'><h2>"+$(this).find("advert_heading").text()+"</h2><p class='price'>"+$(this).find
        ("price_text").text()+"</p><p class='priority'>"+$(this).find("priority").text()+"</p><p>"+$(this).find("main_advert").text()+"</p><a href='"+$(this).find("web_link").text()+"' target='_blank'>VIEW > </a></div></div>");
    });
}
});

我是javascript和Jquery的新手，所以我真的不知道如何过滤列表以排除已售出且仅包括已售出的属性。我如何调整/过滤以获得所需的结果？我用filter（）尝试了一些尝试;功能，但它只是停止显示所有的饲料。

这是我试图合并/使用的代码片段/示例：

var getTextNodesIn = function(el) {
return $(el).find(":not(iframe)").addBack().contents().filter(function() {
    return this.nodeType == 3;
    });
};

getTextNodesIn(el);

我需要使用的数据位于下面显示的优先级字段中。以下是xml Feed的摘录：

<properties>
<property reference="MR139">
    <instructedDate>06/08/2018 17:07:05</instructedDate>
    <price_text>£600,000</price_text>
    <numeric_price>600000.0000</numeric_price>

    <priority>On Market</priority>

    <advert_heading>house for sale</advert_heading>
    <main_advert>some text about the property</main_advert>
    <web_link>www.example.com</web_link>
    <property_style>Detached</property_style>
    <property_reference>111111</property_reference>
    <newHome>NO</newHome>
    <noChain>NO</noChain>
    <furnished>Unknown</furnished>
    <currency>GBP</currency>
    <featuredProperty>NO</featuredProperty>
    <pictures>
        <picture name="Photo 1" lastchanged="2018-08-06T15:44:48.5800534Z">
            <filename>example.jpg</filename>
        </picture>
    </pictures>
</property>
</properties>

[出售物业的优先权字段中的文字将为“已售出”或“已售出STC”，如果这有所不同。]

任何帮助都会非常感激，即使它只是指向我可以使用的与我的问题相关的资源。我的搜索似乎发现了无关的信息，可能是由于我因错误地了解术语而导致错误。

答案

你可以使用下面的priority方法检查each方法中startsWith的值。

$(xml).find("property").each(function() {
    var priority = $(this).find("priority").text();

    if(priority.startsWith('Sold')) {
        //for sold properties
    } else {
        //for unsold properties
    }
});

另一答案

您的过滤功能不正确。你使用this的方式不是它在JavaScript中使用的方式。这是一个常见的错误，因为在大多数面向对象的编程语言中，this意味着与JS不同。请尝试使用此功能 - 请在下面阅读以获取该代码段的更好版本 - ：

var getTextNodesIn = function(el) {
return $(el).find(":not(iframe)").addBack().contents().filter(function(element) {
    return element.nodeType == 3;
    });
};

getTextNodesIn(el);

问题是Array.filter()收到一个函数作为参数。然后为数组的每个元素调用该函数，如果函数返回true，则保留该元素。该函数接收元素作为参数。当函数执行时，this是对全局范围的引用（我知道很奇怪）。

你的问题是，你正在检查你的全局范围名为nodeType的属性是否为3.那nodeType最有可能是undefined，因此不等于3，所以所有的元素都从数组中过滤掉，你留下了一个空数组。

有关过滤器的更多信息，请访问docs。

除此之外，我建议您从代码中重新访问一些内容。

1. 如果可能，切换到使用JSON而不是XML。 JavaScript有一个库来处理JSON字符串。事实上，JSON代表JavaScript Object Notation。你可以做JSON.parse(data)，然后你得到一个可以立即使用的JavaScript对象。在JavaScript中使用JSON比使用XML要好得多
2. 在JavaScript中，在大多数情况下，双等分比较器被认为是不好的做法。它可以给你意想不到的结果。例如"3" == 3是真的。与双等号相比，字符串3和数字3相同。大多数时候你会想要使用三等于，比较被比较的东西的价值和类型
3. 有一种更好的方法可以使用箭头函数编写在第一个语句中返回的函数，这是ES6中引入的语言特性。它还会从外部范围自动绑定this，但这是另一天的故事
4. 我建议你使用比“el”更有意义的名字。从上下文来看，似乎“产品”可能是一个更好的选择，但为了清晰起见，我会在示例中保留“el”。

您可以像这样编写相同的代码段：

const getTextNodesIn = el =>
  $(el)
  .find(":not(iframe)")
  .addBack()
  .contents()
  .filter(element => element.nodeType === 3)

getTextNodesIn(el);

在我看来，这更可读，更清晰

另一答案

祝你好运..似乎社区在现实生活中不使用xml。我已经研究了好几天了，甚至无法直接回答将xml存储在数据库中或使用xquery从.xml feed直接获取所需的数据...然后找到关于用户如何搜索的答案通过例如价格和显示属性在价格顺序似乎很近几年似乎......

如果你使用wordpress它看起来像属性蜂巢插件可能是你最好的选择...花费150英镑，但所有搜索都是为你完成的。