javascript - 如何从 acf.maps 字段获取数据？

Question

我尝试从 Wordpress API 进行简单的获取。在这种情况下来自 ACF 字段。

代码:

我收到回复。但如果我尝试 添加

${post.acf.address}

没有数据。但是为什么，有人可以帮助我吗？

代码如下:

function getPosts() {
  fetch(
    "https://localhost/wp-json/wp/v2/tourplan?per_page=100"
  )
    .then(res => res.json())
    .then(data => {
      let output = '<h2 class="mb-4">Posts</h2>';
      data.forEach(function(post) {
        output += `
                  <div class="card card-body mb-3">
                    <h2>${post.acf.location}</h3>
                    <h3>${post.acf.programmname}</h3>
                    <p>${post.acf.datum}</p>
                    <p>${post.acf.beginn}</p>
                  </div>
                `;
        console.log(data);
      });
      document.getElementById("output").innerHTML = output;
    });
}

如果您在浏览器中调用获取 url，这是 json 响应。

[
    {
        "id": 5692,
        "date": "2019-05-08T14:41:15",
        "date_gmt": "2019-05-08T12:41:15",
        "guid": {
            "rendered": "https://localhost/?post_type=tourplan&p=5692"
        },
        "modified": "2019-05-08T14:41:15",
        "modified_gmt": "2019-05-08T12:41:15",
        "slug": "münchen",
        "status": "publish",
        "type": "tourplan",
        "link": "https://localhost/Tourplan/münchen/",
        "title": {
            "rendered": "München"
        },
        "content": {
            "rendered": "",
            "protected": false
        },
        "template": "",
        "authorName": "wtced",
        "acf": {
            "plz": "81825",
            "location": "Wirtshaus",
            "programmname": "\"Programmname\"",
            "datum": "20190913",
            "einlass": "18:00",
            "beginn": "20:00",
            "ticketlink": "https://localhost/hxanh/",
            "ausverkauft": false,
            "vvk": "Veranstalter: Testverein e.V.",
            "zusatzfeld": "",
            "maps": {
                "address": "Feldstraße 35, 81825 München, Deutschland",
                "lat": "48.386076050384",
                "lng": "11.348405060504"
            }
    }
]

Answer 1

address 属性位于 maps 属性 ${post.acf.maps.address}

并非每个帖子对象都有 maps 属性，因此您需要检查该字段是否存在

data.forEach(function({ acf }) {
  output += `
    <div class="card card-body mb-3">
      <h2>${acf.location}</h3>
      <h3>${acf.programmname}</h3>
      <p>Open Doors: ${acf.einlass}</p>
      <p>Start at: ${acf.beginn}</p>
      <p>${acf.maps && acf.maps.address ? acf.maps.address : 'No address found'}</p>
    </div>
  `;
});