Retrieve XML child nodes by using parent element id using jquery

Question

I have this chart which uses a xml file to grab data to the chart. This xml files has data for several charts. I have successful managed to grab the data and draw the chart. but I'm struggling to retrieve XML child nodes by using parent element id using jquery. The below is the js code and xml file.

HTML File

    <html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">

            google.load("visualization", "1", {
                packages: ["corechart"]
            });

            google.setOnLoadCallback(drawChart);

            var values = [];

            $(document).ready(function() {
                $.ajax({
                    type: "GET",
                    url: "ChartData.xml",
                    dataType: "xml",
                    success: function(xml) {
                        $(xml).find("chart[id='t']").each(function() {
                               $(xml).find('slice').each(function() {
                                    var sTitle = $(this).find('Title').text();
                                    var sValue = parseInt($(this).find('Value').text());
                                    values.push([sTitle, sValue]);
                                });
                            });             
                            drawChart(values);
                    },
                    error: function() {
                        alert("An error occurred while processing XML file.");
                    }
                });
            });

            function drawChart(val) {

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'title');
                data.addColumn('number', 'value');
                data.addRows(val);

                var options = { pieSliceText:'none',
                    chartArea:{left: 10, right: 10, top: 10, bottom: 20, width: '90%'},
                    legend: { alignment:'center', textStyle: {color: '#5C5C5C', fontSize: 12} },    
                    pieHole: 0.5, colors: ['#F6891F', '#A59B91', '#72C5EF', '#53585A', '#C8502B'], 
                    tooltip: {showColorCode: true,text:'percentage'}, 
                    is3D: false,
                    tooltip: {trigger: 'selection', textStyle: {color: '#5C5C5C', fontSize: 12, showColorCode: true,text:'percentage'} },
                    width: 500,
                    height: 400,
                };

                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
            }

        </script>

        <title>Test Charts | Russell Investments Canada</title>
    </head>

    <body>
        <div id="piechart"></div>
    </body>
    </html>

XML File (ChartData.xml)

    <?xml version="1.0" encoding="utf-8" ?>
    <charts>
        <chart id="t">
            <slice>
                <Title>Test 1</Title>
                <Value>30</Value>
            </slice>
            <slice>
                <Title>Test 2</Title>
                <Value>26</Value>
            </slice>
            <slice>
                <Title>Test 3</Title>
                <Value>40</Value>
            </slice>
            <slice>
                <Title>Test 4</Title>
                <Value>4</Value>
            </slice>
        </chart>

        <chart id="a">
            <slice>
                <Title>Test 1</Title>
                <Value>30</Value>
            </slice>
            <slice>
                <Title>Test 2</Title>
                <Value>26</Value>
            </slice>
            <slice>
                <Title>Test 3</Title>
                <Value>40</Value>
            </slice>
            <slice>
                <Title>Test 4</Title>
                <Value>4</Value>
            </slice>
        </chart>
    </charts>

Answer 1

You can combine your iteration:

$(xml).find("chart[id='t'] slice").each(function() {

Because there is just one element with id of t and you want to get the slice tag in it.

 var xml = '<charts><chart id="t"> <slice> <Title>Test 1</Title> <Value>30</Value> </slice> <slice> <Title>Test 2</Title> <Value>26</Value> </slice> <slice> <Title>Test 3</Title> <Value>40</Value> </slice> <slice> <Title>Test 4</Title> <Value>4</Value> </slice> </chart> <chart id="a "> <slice> <Title>Test 1</Title> <Value>30</Value> </slice> <slice> <Title>Test 2</Title> <Value>26</Value> </slice> <slice> <Title>Test 3</Title> <Value>40</Value> </slice> <slice> <Title>Test 4</Title> <Value>4</Value> </slice> </chart></charts>'; $(xml).find('chart[id="t"] slice').each(function() { var sTitle = $(this).find('Title').text(); var sValue = parseInt($(this).find('Value').text()); $('p').append([sTitle, sValue] + "<br/>"); });

 p{ background:black; color:white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p></p>

Retrieve XML child nodes by using parent element id using jquery

Question

1 answers

solution1
0 ACCPTED 2015-01-13 12:37:03

Retrieve XML child nodes by using parent element id using jquery

Question

1 answers

solution1 0 ACCPTED 2015-01-13 12:37:03

solution1
0 ACCPTED 2015-01-13 12:37:03