Проблемы с рендерингом XML-данных в div (и, возможно, выбором правильных XML-узлов)

Question

Я пытаюсь взять данные XML и преобразовать их в div, specifically the Label and Title nodes.

В идеале это будет выглядеть примерно так:

<div class="col-md-3" id="middle-id">
  <[Templates]> // xml data taken from d:Label node
</div>

Я думаю, что ошибка заключается в синтаксисе выбора правильных узлов, но я не очень хорошо знаком с XML и выбором узлов, поэтому не могу сказать наверняка.

Есть мысли? Помощь будет высоко ценится.

Сценарий

<script type="text/javascript">
  $.ajax({
    type: "GET",
    url: "https://[website].com/[]/_api/web/lists/getbytitle('Documents List')/items?$top=1000&$select=Title,ResourceType",
    dataType: "xml",
    success: function(xml) {

      // parse xml file and get data
      let xmlDoc = $.parseXML(xml),
        $xml = $(xmlDoc);
      $xml.find('d:Label').each(function() { // the syntax of only ('d:Label') doesn't seem right to me
        $('#middle-id').append($(this).text() + "<br />");
      });
    }
  });
</script>

Раздел XML

<entry m:etag="&quot;4&quot;">
... // other stuff is here
    <content type="application/xml">
        <m:properties>
            <d:Title m:null="true" />
            <d:ResourceType m:type="Collection([SP field value])">
                <d:element>
                    <d:Label>Templates</d:Label>
                    <d:TermGuid>[guid]</d:TermGuid>
                    <d:WssId m:type="[stuff]">941</d:WssId>
                </d:element>
            </d:ResourceType>
        </m:properties>
    </content>
</entry>

HTML

<div class="col-md-3" id="middle-id"></div>

Answer 1

У вас есть пара проблем. Прежде всего, не пытайтесь анализировать строку XML, а затем преобразовать ее в объект jQuery. Просто поместите преобразовать строку XML непосредственно в объект jQuery. Во-вторых, символ двоеточия должен быть экранирован двумя обратными слешами при использовании в качестве селектора jQuery.

Если вы измените свой JavaScript на приведенный ниже, он должен работать.

<script type="text/javascript">
  $.ajax({
    type: "GET",
    url: "https://[website].com/[]/_api/web/lists/getbytitle('Documents List')/items?$top=1000&$select=Title,ResourceType",
    dataType: "xml",
    success: function(xml) {

      // parse xml file and get data
      let $xml = $(xml);
      $xml.find('d\\:Label').each(function() {
        $('#middle-id').append($(this).text() + "<br />");
      });
    }
  });
</script>

Вот рабочий пример того, как все это будет работать (без вызова ajax):

let xml = '<entry m:etag="&quot;4&quot;"><content type="application/xml"><m:properties><d:Title m:null="true" /><d:ResourceType m:type="Collection([SP field value])"><d:element><d:Label>Templates</d:Label><d:TermGuid>[guid]</d:TermGuid><d:WssId m:type="[stuff]">941</d:WssId></d:element></d:ResourceType></m:properties></content></entry>';

let $xml = $(xml);
$xml.find('d\\:Label').each(function() {
  $('#middle-id').append($(this).text() + "<br />");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="col-md-3" id="middle-id"></div>