API 数据在每个字母后返回逗号 - JavaScript

Question

寻求有关两个问题的指导。

我正在从 API 调用数据 - (https://opendata.dc.gov/datasets/7fa33d79592c412a95a1f14c026c6dc0/api)，带有两个外字段（名称、地址）

但它会返回姓名和地址数据，每个字母后面都有一个逗号。所以像 “史蒂文斯花园”显示为： F,t,.,,S,t,e,v,e,n,s,,G,a,r,d,e,n

我该如何补救才能避免出现这种情况？

const APIURL =
  'https://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Environment_Land_WebMercator/MapServer/54/query?where=1%3D1&outFields=NAME,ADDRESS&outSR=4326&f=json';

async function fetchFeatures() {
  try {
    const list = await fetch(`${APIURL}`);

    let json = await list.json();
    // getFeatures(json);
    // console.log('Testing this', json);
    return json;
  } catch (err) {
    console.log(err.message);
  }
}

const createListingItem = listGardenName =>
  `<h1 id="listingName">${listGardenName}</h1>`;

const getFeatures = async () => {
  const data = await fetchFeatures();

  const titles = data.features.map(gardenNames => gardenNames.attributes);

  for (let i = 0; i < titles.length; i++) {
    let gardenNames = [];
    let gardenAddress = [];

    for (const property in titles) {
      gardenNames.push(`${Object.values(titles[property].NAME)}`);
      gardenAddress.push(`${Object.values(titles[property].ADDRESS)}`);

      // gardenNames.push(`${property}: ${Object.values(titles[property])}`);
      // console.log(obj['name']);
    }
    gardenBlock.classList.remove('none');

    const listGardenName = gardenNames.map(t => createListingItem(t)).join('');
    document.getElementById('listingName').innerHTML = listGardenName;

    const listGardenAddress = gardenAddress
      .map(t => createListingItem(t))
      .join('');
    document.getElementById('listingAddress').innerHTML = listGardenAddress;
  }
};

第二个问题是我希望存储在 GardenNames 和 GardenAddress 数组中的数据一起显示。这样花园的名称下面就有该花园的地址。当我尝试将 GardenAddress 添加到 createListingItem 中时，如果我以一种方式编码，它要么显示为未定义，要么显示所有地址，但仅在列出所有名称之后。

这是我第一次从 API 调用数据，我将不胜感激任何见解 - 我一直潜伏在堆栈溢出周围并实现了这个问题的编码解决方案：为什么我的代码在每个元素后面返回一个逗号？但是它当我格式化代码以匹配时，每个字母后面仍然显示逗号。

如果有人推荐并愿意分享任何可供阅读的资源，我将非常感激。

当我将代码格式化为下面的格式时，它会一起显示花园名称和地址，但我希望能够在 css 中以不同的样式格式化名称和地址，所以我认为我不能使用这个：

const createListingItem = item => `<div class="garden">${item}</div>`;

const getFeatures = async () => {
  const data = await fetchFeatures();

  const titles = data.features.map(gardenNames => gardenNames.attributes);

  for (let i = 0; i < titles.length; i++) {
    let gardenNames = [];

    for (const property in titles) {
      gardenNames.push(`${property}: ${Object.values(titles[property])}`);
    }

    const listItems = gardenNames.map(t => createListingItem(t)).join('');
    document.getElementById('listings').innerHTML = listItems;
  }
};

感谢您的任何提示或指导。与此同时，我将通过谷歌和资源来尝试解决这个问题。

Answer 1

摆脱那些

Object.values

：它们不是必需的，而且它们会导致你的第一个问题。

对于第二个问题，使用单独的 HTML 元素来表示名称和地址。使用类进行样式设置，因为

id

属性应该是唯一的。

const createListingItem = (garden) =>
  `<div class="garden">
    <h1 class="garden-name">${garden.name}</h1>
    <h2 class="garden-address">${garden.address}</h2>
  </div>`;
const getFeatures = async () => {
  const data = await fetchFeatures();
  const gardenData = data.features.map(feature => ({
    name: feature.attributes.NAME,
    address: feature.attributes.ADDRESS
  }));
  var listHtml = gardenData.map(garden => createListingItem(garden)).join('');
  document.getElementById('listings').innerHTML = listHtml;
});

我在下面的代码片段中硬编码了一些结果，以展示这是如何工作的。

const data = {
    "displayFieldName": "NAME",
    "fieldAliases": {
        "NAME": "Name",
        "ADDRESS": "Address"
    },
    "geometryType": "esriGeometryPoint",
    "spatialReference": {
        "wkid": 4326,
        "latestWkid": 4326
    },
    "fields": [
        {
            "name": "NAME",
            "type": "esriFieldTypeString",
            "alias": "Name",
            "length": 255
        },
        {
            "name": "ADDRESS",
            "type": "esriFieldTypeString",
            "alias": "Address",
            "length": 255
        }
    ],
    "features": [
        {
            "attributes": {
                "NAME": "Ft. Stevens Garden",
                "ADDRESS": "1327 VAN BUREN STREET NW"
            },
            "geometry": {
                "x": -77.030969558051225,
                "y": 38.970534392122069
            }
        },
        {
            "attributes": {
                "NAME": "Rock Creek Garden",
                "ADDRESS": "OREGON AVENUE NW AND NORTHAMPTON STREET NW"
            },
            "geometry": {
                "x": -77.053619710910311,
                "y": 38.966722603548469
            }
        }
    ]
};
const createListingItem = (garden) =>
  `<div class="garden">
    <h1 class="garden-name">${garden.name}</h1>
    <h2 class="garden-address">${garden.address}</h2>
  </div>`;
window.addEventListener("load", () => {
  const gardenData = data.features.map(feature => ({
    name: feature.attributes.NAME,
    address: feature.attributes.ADDRESS
  }));
  var listHtml = gardenData.map(garden => createListingItem(garden)).join('');
  document.getElementById('listings').innerHTML = listHtml;
});

<div id="listings"></div>

但请注意：正如所写，如果其中一个花园的名称或地址中包含 HTML，它会将其注入到您的 HTML 中。充其量，它只会弄乱你的显示。最坏的情况是，它可能允许恶意脚本在用户的浏览器中执行。

我会强烈推荐使用旨在解决此类问题的框架：react、vue 或 Angular。您的代码将会更简单、更安全。