textContent在迭代JavaScript XML中返回不需要的空文本值

Question

I'm trying to pull the text value of the <point> nodes in my XML file widgets.xml .

I am successful in getting the text, however I am also getting unwanted empty text values in between each iteration in my for loop. After careful debugging, it looks like the problem begins right around when lines[i].childNodes[j].textContent is called at the bottom of my JavaScript file.

In my debugger in Chrome, it appears that the first value it holds at points[0][0] is a small arrow that goes down and to the left, similar to the one you find on your Return key on your keyboard.

I have been toying around with it for a while, but I can't seem to figure out what's wrong.

What exactly is textContent doing during the iteration?

Here's the code:

---

XML

<?xml version="1.0" encoding="UTF-8"?>


<user>
    <widgets>
        <widget id="00" status="on">
            <name>Bookings</name>
            <phpfile>booking.php</phpfile>
        </widget>
        <widget id="01" status="on">
            <name>Room Nights</name>
            <phpfile>room_nights.php</phpfile>
        </widget>
        <widget id="02" status="on" currency_type="$">
            <name>Revenue</name>
            <phpfile>revenue.php</phpfile>
        </widget>
        <widget id="03" status="on">
            <name>Visits</name>
            <phpfile>visits.php</phpfile>
        </widget>
        <widget id="04" status="on">
            <name>Website Traffic</name>
            <phpfile>chart.php</phpfile>
            <dataset>
                <data>
                    <startdate>2014-10-01</startdate>
                    <enddate>2014-10-12</enddate>
                    <lines>
                        <line num="1" name="Booking Engine">
                            <point>2014-10-01, 132</point>
                            <point>2014-10-02, 123</point>
                            <point>2014-10-03, 171</point>
                            <point>2014-10-04, 99</point>
                            <point>2014-10-05, 72</point>
                            <point>2014-10-06, 85</point>
                            <point>2014-10-07, 102</point>
                            <point>2014-10-08, 107</point>
                            <point>2014-10-09, 124</point>
                            <point>2014-10-10, 132</point>
                            <point>2014-10-11, 136</point>
                            <point>2014-10-12, 131</point>
                        </line>
                        <line num="2" name="Revenue">
                            <point>2014-10-01, 123</point>
                            <point>2014-10-02, 99</point>
                            <point>2014-10-03, 65</point>
                            <point>2014-10-04, 201</point>
                            <point>2014-10-05, 123</point>
                            <point>2014-10-06, 156</point>
                            <point>2014-10-07, 123</point>
                            <point>2014-10-08, 76</point>
                            <point>2014-10-09, 45</point>
                            <point>2014-10-10, 123</point>
                            <point>2014-10-11, 190</point>
                            <point>2014-10-12, 143</point>
                        </line>
                    </lines>
                </data>
            </dataset>
        </widget>
        <widget id="05" status="on">
            <name>Tips</name>
            <phpfile>tips.php</phpfile>
        </widget>
        <widget id="06" status="on">
            <name>Recent Bookings</name>
            <phpfile>recent_bookings.php</phpfile>
        </widget>
        <widget id="07" status="on">
            <name>Timeline</name>
            <phpfile>timelines.php</phpfile>
        </widget>
        <widget id="08" status="on">
            <name>Employees</name>
            <phpfile>employees.php</phpfile>
        </widget>
        <widget id="09" status="on">
            <name>Daily Progress</name>
            <phpfile>daily_progress.php</phpfile>
        </widget>
    </widgets>
</user>

---

and the script:

JS

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            getXmlGraphData();

            //Gets the XML data from the widgets.xml file
            function getXmlGraphData() {
              var request = new XMLHttpRequest();
              var user;
              var lines = [];
              var points = [[]];

              request.open("GET", "widgets.xml", false);
              request.send();

              var xml = request.responseXML;
              var lines = xml.getElementsByTagName("line");

              for (var i = 0; i < lines.length; ++i) {
                if (!lines) {
                  lines = [];
                }

                for (var j = 0; j < lines[i].childNodes.length; ++j) {
                    if (!points[i]) {
                        points[i] = [];
                    }
                    points[i][j] = lines[i].childNodes[j].textContent; //the problem begins here
                }
              }

              document.write(points);
            }

        });
    </script>

---

Output

Notice the gaps between the values:

    ,2014-10-01, 132, ,2014-10-02, 123, ,2014-10-03, 171, ,2014-10-04, 99, ,2014-10-05, 72, ,2014-10-06, 85, ,2014-10-07, 102, ,2014-10-08, 107, ,2014-10-09, 124, ,2014-10-10, 132, ,2014-10-11, 136, ,2014-10-12, 131, , ,2014-10-01, 123, ,2014-10-02, 99, ,2014-10-03, 65, ,2014-10-04, 201, ,2014-10-05, 123, ,2014-10-06, 156, ,2014-10-07, 123, ,2014-10-08, 76, ,2014-10-09, 45, ,2014-10-10, 123, ,2014-10-11, 190, ,2014-10-12, 143,

If you solve it, thanks in advance.

Answer 1

use trim function to get rid of white spaces at begining and ending of a string. Also check for null strings.

Eg:

var str=" text "
var trimmedText=str.trim()//returns "text"