2

I have a XML/RSS feed I created with a generator and I'm trying to embed it into my HTML website, I tried to do it in this way

<div class="col-sm">
    <embed src="./rss/latamreuters.xml" type="text/xmldata">
</div>

But it isn't rendering anything. When I removed the type it threw me this error:

This XML file does not appear to have any style information associated with it. The document tree is shown below.

What does this mean? Do I have some kind of syntax error in my XML file? is this not the way I should be embedding it? What could I do?

If that helps I'm not using a pure HTML page, I am using Vue js.

FlowMafia
  • 922
  • 2
  • 19
  • 37

1 Answers1

4

Probably the easiest way to include an XML file as plain text in your Vue component is to load it via Ajax and save it in a state variable and display it in the template. You can load the XML file with e.g. axios.

Here is an example of this scenario in Vue:

new Vue({
  el: '#app',
  data () {
    return {
      xmlContent: null,
      xmlError: false
    };
  },
  created () {
    this.loadData();
  },
  methods: {
    loadData () {
      this.xmlContent = null;
      this.xmlError = false;

      axios.get('../test.xml').then(response => {
        this.xmlContent = response.data;
      }, () => {
        this.xmlError = true;
      });
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

<div id="app">
  <div class="content">
    <div>XML-content: <pre>{{ xmlContent }}</pre></div>
    <div>XML-error: {{ xmlError }}</div>
  </div>
</div>
ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
  • If I have my folder structure like this: I got the .vue view in root/resources/js/main/Rss.vue, and the XML file in root/public/rss/test.xml the get call should be in...? (I'm using Laravel for backend, that's why it is distributed like that) – FlowMafia Nov 24 '19 at 00:26
  • If you make an Ajax call, you need to use the link the actual user is able to load (not your development paths). So, compare the URL on where your Vue component is running with the URL to your XML file and then decide if it useful to use an absolute or relative URL in the ajax request. – ssc-hrep3 Nov 24 '19 at 00:29
  • alright, it worked, by doing `axios.get('/rss/test.xml')` – FlowMafia Nov 24 '19 at 00:42
  • although i didn't want to render is as *plain text*, since it's a rss feed, is there a way to change the way I want to render it? – FlowMafia Nov 24 '19 at 00:46
  • So, you want to parse it as XML? With an object data structure to access the nodes? Or just create some syntax highlighting? – ssc-hrep3 Nov 24 '19 at 01:01
  • i don't want to show any kind of code since it needs to be readable for the final user – FlowMafia Nov 24 '19 at 01:05
  • 2
    Then, you need to parse the XML. You might want to look up `XML parsing in JavaScript`. There are many questions and answers to this topic here on Stackoverflow and on Google (e.g. https://stackoverflow.com/a/8412989/3233827) – ssc-hrep3 Nov 24 '19 at 01:13
  • Can I parse the XML using the generated xmlContent in this answer or do I need to remake all the function? – FlowMafia Nov 24 '19 at 01:21
  • 1
    Yes, you can. The first step is to get the file as a String (like in the answer). Then, you need to parse that String to an object structure with an XML parser. Then, you can access the XML structure node by node and read the information you need to display in the view. – ssc-hrep3 Nov 24 '19 at 12:21