我想使用 Jquery 在我的网站中嵌入 API 调用

Question

我正在使用 Kimonolabs，我想使用 jquery 在我的 html 中嵌入这个 JSON 结构的结果，我是 jquery 和 javascript 的新手，所以我做了本教程中给出的所有事情：Tutorial Kimonolabs

{
  "name": "CCF blog",
  "count": 104,
  "frequency": "Weekly",
  "version": 1,
  "newdata": true,
  "lastrunstatus": "success",
  "thisversionstatus": "success",
  "nextrun": "Tue May 12 2015 19:54:32 GMT+0000 (UTC)",
  "thisversionrun": "Tue May 05 2015 19:54:32 GMT+0000 (UTC)",
  "results": {
    "collection2": [
      {
        "Date": {
          "href": "http://ccf.ma/blog/?p=42",
          "text": "April 6, 2015"
        },
        "Titre": {
          "href": "http://ccf.ma/blog/?p=42",
          "text": "Le chemin vers la Responsabilité Sociétale des entreprises"
        },
        "description": "Qu’est-ce que c’est une entreprise RSE ? Est-ce une démarche réservée aux grandes entreprises ? Quels sont les enjeux réels ? Quel est l’état d’esprit ?"
      },
      {
        "Date": {
          "href": "http://ccf.ma/blog/?p=30",
          "text": "March 20, 2015"
        },
        "Titre": {
          "href": "http://ccf.ma/blog/?p=30",
          "text": "Formation continue … quel choix pour quel besoin professionnel ?"
        },
        "description": "Chacun d’entre nous suit, au cours de sa jeunesse une formation initiale jusqu’au statut universitaire pour s’engager dans le vie active, pourtant, il ne nous tarde de nous poser des questions sur les nouveaux besoins en formation selon nos enjeux professionnelles et notre motivation, soit pour nous convertir, booster notre carrière ou simplement renforcer nos connaissances et compétences."
      },
      {
        "Date": {
          "href": "http://ccf.ma/blog/?p=9",
          "text": "March 19, 2015"
        },
        "Titre": {
          "href": "http://ccf.ma/blog/?p=9",
          "text": "La TPE/ PME marocaine et le mangement par les processus"
        },
        "description": "Toute entreprise qu’elle soit cliente ou fournisseur a eu recours aux processus. Le management par le processus peut être un choix interne ou dicté par l’environnement externe, cas des clients qui exigent de leurs fournisseurs la mise en place de procédures spécifiques et la tenue d’un registre dédié, justifiant leurs applications."
      },
      {
        "Date": {
          "href": "http://ccf.ma/blog/?p=1",
          "text": "March 19, 2015"
        },
        "Titre": {
          "href": "http://ccf.ma/blog/?p=1",
          "text": "Coacher avec éthique … n’est-ce pas un vrai axe de différentiation ?"
        },
        "description": "Dès le début des années 2000, la relation de coaching n’apparait plus comme un effet de mode mais comme une pratique en progression, une pratique de plus en plus perçue comme un levier de développement, plutôt qu’une simple aide en cas de difficulté ;"
      }
    ],

我使用这个带有适当 html/css 结构（基础）“titre-article”的 jquery 脚本。这是我的 html 类，我想更新：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
  $.ajax({
  url:"https://www.kimonolabs.com/api//////?apikey=////////////",
  crossDomain: true,
  dataType: "jsonp",
  success: function (response) {
  //Do something with the response
  var collection = response.results.collection2;

  $(".titre-article").html(collection.Titre.text);


  },
  error: function (xhr, status) {
    //handle errors
  }
});
</script>

但似乎没有任何效果。

Answer 1

问题是response.results.collection2 是一个数组，但是你作为一个对象使用，你需要一个索引来访问数组中的值

将$(".titre-article").html(collection.Titre.text); 更改为$(".titre-article").html(collection[0].Titre.text);

这将为您提供数组中的第一个元素

Answer 2

Here is how you can get results

var collection = response.results.collection2[0];

$(".titre-article").html(collection.Titre.text);