Building a new element with core-ajax & xml in polymer

Question

i'm totally new to writing codes, basically i'm learning from internet not even a friend to discuss because i'm differently abled person with ability to operate just a mouse. so, here's the thing, when i decided to learn polymer i forgot 1 basic thing that i don't know javaScript. for past fewv years i learned html ,css, some jquery.

all i'm trying to do create an element "my-code". saved as my-codes.html

  <link rel="import" href="../components/polymer/polymer.html">
    <link rel="import" href="../components/core-ajax/core-ajax.html">

<polymer-element name="my-code">
<template>
<core-ajax auto url="../xmls/canon.xml" handleAs="xml" response="{{resp}}"></core-ajax>
<p>{{resp}}</p>
</template>
<script>
Polymer('mycode',{

    });
</script>
</polymer-element>

here's my index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>testing template</title>
  <script src="components/platform/platform.js"></script>
  <link rel="import" href="elements/my-codes.html">
</head>

<body unresolved>
<my-code></my-code>

</body>
</html>

here's some sample of my canon.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<canonc xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <canon>
        <Error> EO  </Error>
        <Cause> Fuser unit malfunction  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> EOOO  </Error>
        <Cause> Fuser unit malfunction  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E001  </Error>
        <Cause> Fuser unit thermistor problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E002  </Error>
        <Cause> Fuser unit thermistor/triac problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
    <canon>
        <Error> E003  </Error>
        <Cause> Fuser unit thermistor/heater problem  </Cause>
        <Action> Eng. Required  </Action>
    </canon>
</canonc>

all i need is if someone help in finishing ( teaching me) the code. especially javaScript part. i need output to be like

<div class="card">
<div>error</div>
<div>cause</div>
<div>action </div>
</div>
<div class="card">
<div>error2</div>
<div>cause2</div>
<div>action2 </div>
</div>

i know i'm asking for too much , but please help me. i'm having 20 xml documents, else i've to make them as something else. or nuking the idea(because i do things for hobby & learning ).

here's the jquery script i have been using on a different html for the same purpose.

function commn(){
    $("#canon").empty();
      $.ajax({
    type: "GET",
    url: "xmls/canon.xml",
    dataType: "xml",
    success: function(xml){
    $(xml).find('canon').each(function(){
      var serror = $(this).find('Error').text();
      var sdesc = $(this).find('Cause').text();
            var saction = $(this).find('Action').text();
      $("<div class='concor'></div>").html("<div class='error'>" + serror + "</div>" + "<div class='desc'>" + sdesc + "</div>" + "<div class='actn'>" + saction + "</div>").appendTo("#canon");
    });
  },
  error: function() {
    alert("An error occurred while processing XML file.");
  } 
        });
}

Thanks in advance

score 1 · Accepted Answer · edited May 23 '17 at 12:04

First of all you've made a typo when calling the Polymer function. The first parameter must match the element name, therefore you need to write

Polymer('my-code', ...

Then i would suggest to use filters and a repeat template to minimize the amount of JavaScript that is needed for your requirement. You also don't need jQuery for this (btw. if you know about jQuery then you know about JavaScript, since jQuery is written in JavaScript ;-)).

Here's the code:

<polymer-element name="my-code">
  <template>
    <core-ajax auto url="../xmls/canon.xml" handleAs="xml" 
      response="{{resp}}"></core-ajax>
    <template repeat="{{canon in resp | nodeList('canon')}}">
      <div class="card">
        <div>{{canon | nodeText('Error')}}</div>
        <div>{{canon | nodeText('Cause')}}</div>
        <div>{{canon | nodeText('Action')}}</div>
      </div>
    </template>
  </template>
  <script>
    Polymer('my-code', {
      nodeList: function(element, name) {
        return element ? 
          [].slice.call(element.querySelectorAll(name)) : []
      },
      nodeText: function(element, name) {
        return element.querySelector(name).innerHTML;
      }
    });
  </script>
</polymer-element>

Explanation:

nodeList(element, name) is a filter-function that returns all the (XML) child nodes of the specified element with the selector name as an array (this is done with the slightly strange [].slice.call construct, refer to this SO question for more information about this).

element can be undefined, so we need to check for this and return an emtpy array in this case.

nodeText(element, name) is a filter-function that returns the text content of the child node of the specified element with the selector name.

The repeat-template

<template repeat="{{canon in resp | nodeList('canon')}}">

repeats over all array elements that the nodeList filter returns (i.e. the canon elements of your XML).

Then in each

<div>{{canon | nodeText('Error')}}</div>

the nodeText filter returns the text content of the specified child node (e.g. "Error") of the current canon node.

You can find out more about the querySelector() and querySelectorAll() functions here and here.

You're welcome. Glad to see that my answer has helped on solving your problem. In this case you can mark the answer as accepted by clicking on the check mark left to it. So everyone can see that this is not an open question anymore. — Dirk Grappendorf, Aug 04 '14 at 08:05

Building a new element with core-ajax & xml in polymer

1 Answers1