JSON von Contentful in Moustache bringen

Question

Ich versuche, meine Einträge von Contentful (JSON) zu erhalten und sie in eine Moustache-Vorlage einzufügen.

Der folgende Code funktioniert, ist aber nicht auf eine Vorlage angewendet:

client.getEntries() 
    .then((response) => { 

    var template = $('#myEntries').html(); 
    var html = Mustache.to_html(template, response.data); 
    $('.result').html(html); 

    }) 
    .catch((error) => { 
    console.log('Error occured') 
    console.log(error) 
    }) 

HTML:

client.getEntries() 
.then((response) => { 
    $('.result').html(response.items.map((item) => ' Items: ' + item.sys.id).join('\n')); 

}) 
.catch((error) => { 
    console.log('\x1b[31merror occured') 
    console.log(error) 
}) 

Wenn ich das gleiche Verfahren versuchen, aber es in eine Vorlage setzen es nicht funktioniert

<script id="myEntries" type="text/template"> 
    {{#items}} {{fields.customerName}} {{/items}} 
</script> 

<div class="result"></div> 

Es scheint, die JSON-Zeichenfolge ist nicht ordnungsgemäß an die Vorlage angehängt?

Die JSON-Datei wie diese wäre genial

{ 
    "sys":{ 
     "type":"Array" 
    }, 
    "total":3, 
    "skip":0, 
    "limit":100, 
    "items":[ 
     { 
      "sys":{ 
       "space":{ 
       "sys":{ 
        "type":"Link", 
        "linkType":"Space", 
        "id":"4eewqivb4aog" 
       } 
       }, 
       "id":"4moramDebKGsUwI2a6YOSe", 
       "type":"Entry", 
       "createdAt":"2017-03-31T17:31:25.994Z", 
       "updatedAt":"2017-03-31T17:31:25.994Z", 
       "revision":1, 
       "contentType":{ 
       "sys":{ 
        "type":"Link", 
        "linkType":"ContentType", 
        "id":"customer" 
       } 
       }, 
       "locale":"sv-SE" 
      }, 
      "fields":{ 
       "customerName":"3", 
       "customerUrl":"3" 
      } 
     }, 
     { 
      "sys":{ 
       "space":{ 
       "sys":{ 
        "type":"Link", 
        "linkType":"Space", 
        "id":"4eewqivb4aog" 
       } 
       }, 
       "id":"5M6NPWMve0YgMcSUcoAusk", 
       "type":"Entry", 
       "createdAt":"2017-03-31T17:31:51.535Z", 
       "updatedAt":"2017-03-31T17:31:51.535Z", 
       "revision":1, 
       "contentType":{ 
       "sys":{ 
        "type":"Link", 
        "linkType":"ContentType", 
        "id":"customer" 
       } 
       }, 
       "locale":"sv-SE" 
      }, 
      "fields":{ 
       "customerName":"4", 
       "customerUrl":"4" 
      } 
     }, 
     { 
      "sys":{ 
       "space":{ 
       "sys":{ 
        "type":"Link", 
        "linkType":"Space", 
        "id":"4eewqivb4aog" 
       } 
       }, 
       "id":"2ClsG24K5S6qiAYGi8gEQI", 
       "type":"Entry", 
       "createdAt":"2017-03-31T17:22:16.490Z", 
       "updatedAt":"2017-03-31T17:22:16.490Z", 
       "revision":1, 
       "contentType":{ 
       "sys":{ 
        "type":"Link", 
        "linkType":"ContentType", 
        "id":"customer" 
       } 
       }, 
       "locale":"sv-SE" 
      }, 
      "fields":{ 
       "customerName":"5", 
       "customerUrl":"5" 
      } 
     } 
    ] 
    } 

sieht etwas Hilfe mit diesem zu bekommen :)

/Oskar

Answer 1

Aus dem Code, den Sie zeigte, sieht es aus wie Sie vorbei sind Falsche Daten für die Vorlage, das Antwortobjekt hat keine data Eigenschaft. und es ist eine gute Praxis zu nennen .toPlainObject() so dass alle angehängten Hilfsmethoden werden entfernt, und Sie werden sich mit nur den Rohdaten

Code sollte

client.getEntries() 
    .then((response) => { 

    var template = $('#myEntries').html(); 
    var html = Mustache.to_html(template, response.toPlainObject()); 
    $('.result').html(html); 

    }) 
    .catch((error) => { 
    console.log('Error occured') 
    console.log(error) 
    })