javascript - How to Filter Parsed XML data by Element Content [jQuery] - Stack Overflow

admin管理员组

文章数量:1022804

So I have a xml housing property feed [on a WordPress site] currently that is pretty simple, it just gathers the fields i want to show and displays that as a list [pretty normal stuff] But i now need to be able make two lists, one that shows only sold properties, and one does not show sold properties. Currently my code is as follows:

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>");
    });
}
});

Im pretty novice at Javascript and Jquery so im really not sure how i go about filtering the lists to exclude sold and only include sold properties. How do i adapt/filter this to get the required result? I tried some attemps with filter(); function but it just kept stopping the feed from displaying at all.

This was the snippet/example i was trying to incorporate/work with:

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

getTextNodesIn(el);

The data i need to use is in the Priority Field shown below. Here is an extract from the 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</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>

[The text in the priority field for sold properties will either be "Sold" or "Sold STC" if that makes a difference.]

Any help would be much appreciated, even if its just pointing me to resources i can use that are relevant to my problem. My searches seem to turn up unrelated information, potentially due to me wording things wrong due to not knowing the terminology properly.

So I have a xml housing property feed [on a WordPress site] currently that is pretty simple, it just gathers the fields i want to show and displays that as a list [pretty normal stuff] But i now need to be able make two lists, one that shows only sold properties, and one does not show sold properties. Currently my code is as follows:

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>");
    });
}
});

Im pretty novice at Javascript and Jquery so im really not sure how i go about filtering the lists to exclude sold and only include sold properties. How do i adapt/filter this to get the required result? I tried some attemps with filter(); function but it just kept stopping the feed from displaying at all.

This was the snippet/example i was trying to incorporate/work with:

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

getTextNodesIn(el);

The data i need to use is in the Priority Field shown below. Here is an extract from the 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.</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>

[The text in the priority field for sold properties will either be "Sold" or "Sold STC" if that makes a difference.]

Any help would be much appreciated, even if its just pointing me to resources i can use that are relevant to my problem. My searches seem to turn up unrelated information, potentially due to me wording things wrong due to not knowing the terminology properly.

• javascript
• jquery
• html
• xml
• xml-parsing

Share Improve this question Follow edited Aug 23, 2018 at 10:03 Moose asked Aug 22, 2018 at 9:50 MooseMoose 33311 silver badge1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

You can check the value of priority in your each method using startsWith method like below.

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

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

Good luck dude.. it seems the munity dont use xml in real life. I ve researched for days now and cant get even get a straight answer to storing the xml in a database or using xquery to get the data i need from the .xml feed directly... to then find an answer on how a user could search by e.g. price and display property in price order seems light years away it seems...

if your using wordpress it looks like property hive plugin might be your best bet... cost £150 but all searching is done for you.

Your filter function is not correct. The way you're using this is not the way it's used in JavaScript. That's a mon error because in most Object Oriented programming languages, this means a different thing than in JS. Try this function instead –keep reading below for a better version of that snippet–:

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

getTextNodesIn(el);

The problem is that Array.filter() receives a function as the argument. That function is then called for each element of the array, and the element is kept if the function returns true. The function receives the elements as arguments. When the function is being executed, this is a reference to the global scope (weird, I know).

Your problem there is that you're checking if the property named nodeType of your global scope is 3. That nodeType is most probably undefined and therefore not equal to 3, so all the elements are filtered from the array and you're left with an empty array.

More info about filter in the docs.

Apart from that, there are some things I remend you to revisit from your code.

1. Switch to using JSON instead of XML if possible. JavaScript has a library to deal with JSON strings. As a matter of fact, JSON stands for JavaScript Object Notation. You could just do JSON.parse(data), and you get a JavaScript object that you can use right away. It's just sooo much nicer to work with JSON than XML in JavaScript

2. In JavaScript the double equal parator is considered bad practice in most of the cases. It can give you unexpected results. For example "3" == 3 is true. The String 3 and the number 3 are the same when pared with double equals. Most of the time you will want to use triple equals, that pare the value and type of the things being pared

3. There's a better way to write functions that return in the first statement using the arrow function, that is a language feature introduced in ES6. It also auto bind the this from the outer scope, but that's a story for another day

4. I'd remend that you use more meaningful names than "el". From the context, it seems "product" could be a better choice, but I'll keep "el" in the examples for clarity.

You could write the same snippet like this:

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

getTextNodesIn(el);

In my opinion that's more readable and clearer

So I have a xml housing property feed [on a WordPress site] currently that is pretty simple, it just gathers the fields i want to show and displays that as a list [pretty normal stuff] But i now need to be able make two lists, one that shows only sold properties, and one does not show sold properties. Currently my code is as follows:

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>");
    });
}
});

Im pretty novice at Javascript and Jquery so im really not sure how i go about filtering the lists to exclude sold and only include sold properties. How do i adapt/filter this to get the required result? I tried some attemps with filter(); function but it just kept stopping the feed from displaying at all.

This was the snippet/example i was trying to incorporate/work with:

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

getTextNodesIn(el);

The data i need to use is in the Priority Field shown below. Here is an extract from the 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</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>

[The text in the priority field for sold properties will either be "Sold" or "Sold STC" if that makes a difference.]

Any help would be much appreciated, even if its just pointing me to resources i can use that are relevant to my problem. My searches seem to turn up unrelated information, potentially due to me wording things wrong due to not knowing the terminology properly.

So I have a xml housing property feed [on a WordPress site] currently that is pretty simple, it just gathers the fields i want to show and displays that as a list [pretty normal stuff] But i now need to be able make two lists, one that shows only sold properties, and one does not show sold properties. Currently my code is as follows:

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>");
    });
}
});

Im pretty novice at Javascript and Jquery so im really not sure how i go about filtering the lists to exclude sold and only include sold properties. How do i adapt/filter this to get the required result? I tried some attemps with filter(); function but it just kept stopping the feed from displaying at all.

This was the snippet/example i was trying to incorporate/work with:

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

getTextNodesIn(el);

The data i need to use is in the Priority Field shown below. Here is an extract from the 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.</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>

[The text in the priority field for sold properties will either be "Sold" or "Sold STC" if that makes a difference.]

Any help would be much appreciated, even if its just pointing me to resources i can use that are relevant to my problem. My searches seem to turn up unrelated information, potentially due to me wording things wrong due to not knowing the terminology properly.

• javascript
• jquery
• html
• xml
• xml-parsing

Share Improve this question Follow edited Aug 23, 2018 at 10:03 Moose asked Aug 22, 2018 at 9:50 MooseMoose 33311 silver badge1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3 +50

You can check the value of priority in your each method using startsWith method like below.

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

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

Good luck dude.. it seems the munity dont use xml in real life. I ve researched for days now and cant get even get a straight answer to storing the xml in a database or using xquery to get the data i need from the .xml feed directly... to then find an answer on how a user could search by e.g. price and display property in price order seems light years away it seems...

if your using wordpress it looks like property hive plugin might be your best bet... cost £150 but all searching is done for you.

Your filter function is not correct. The way you're using this is not the way it's used in JavaScript. That's a mon error because in most Object Oriented programming languages, this means a different thing than in JS. Try this function instead –keep reading below for a better version of that snippet–:

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

getTextNodesIn(el);

The problem is that Array.filter() receives a function as the argument. That function is then called for each element of the array, and the element is kept if the function returns true. The function receives the elements as arguments. When the function is being executed, this is a reference to the global scope (weird, I know).

Your problem there is that you're checking if the property named nodeType of your global scope is 3. That nodeType is most probably undefined and therefore not equal to 3, so all the elements are filtered from the array and you're left with an empty array.

More info about filter in the docs.

Apart from that, there are some things I remend you to revisit from your code.

1. Switch to using JSON instead of XML if possible. JavaScript has a library to deal with JSON strings. As a matter of fact, JSON stands for JavaScript Object Notation. You could just do JSON.parse(data), and you get a JavaScript object that you can use right away. It's just sooo much nicer to work with JSON than XML in JavaScript

2. In JavaScript the double equal parator is considered bad practice in most of the cases. It can give you unexpected results. For example "3" == 3 is true. The String 3 and the number 3 are the same when pared with double equals. Most of the time you will want to use triple equals, that pare the value and type of the things being pared

3. There's a better way to write functions that return in the first statement using the arrow function, that is a language feature introduced in ES6. It also auto bind the this from the outer scope, but that's a story for another day

4. I'd remend that you use more meaningful names than "el". From the context, it seems "product" could be a better choice, but I'll keep "el" in the examples for clarity.

You could write the same snippet like this:

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

getTextNodesIn(el);

In my opinion that's more readable and clearer

本文标签： javascriptHow to Filter Parsed XML data by Element Content jQueryStack Overflow