JavaScript调用API返回数据字符带逗号及成对展示问题求助

问题1：返回数据格式异常（字符串被拆分为带逗号的单个字符） #

调用API获取NAME和ADDRESS字段时，出现字符串每个字符后带逗号的问题，比如原本的“Ft. Stevens Garden”被显示为“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();
    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)}`);
    }
    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;
  }
};

问题原因与解决方案 #

• 原因：你用了Object.values()处理titles[property].NAME，但NAME本身是字符串类型，Object.values()会把字符串拆成单个字符组成的数组，数组转字符串时默认用逗号分隔每个元素，所以出现了每个字符带逗号的情况。另外，嵌套的for...in循环遍历的是数组索引，逻辑多余。
• 修正代码：直接读取NAME和ADDRESS字段值，去掉Object.values()，同时简化遍历逻辑：

const createListingName = name => `<h1 class="listing-name">${name}</h1>`;
const createListingAddress = address => `<p class="listing-address">${address}</p>`;

const getFeatures = async () => {
  const data = await fetchFeatures();
  const gardens = data.features.map(item => item.attributes);
  
  gardenBlock.classList.remove('none');
  const nameContainer = document.getElementById('listingName');
  const addressContainer = document.getElementById('listingAddress');
  
  // 清空容器原有内容
  nameContainer.innerHTML = '';
  addressContainer.innerHTML = '';
  
  gardens.forEach(garden => {
    nameContainer.innerHTML += createListingName(garden.NAME);
    addressContainer.innerHTML += createListingAddress(garden.ADDRESS);
  });
};

问题2：花园名称与地址成对展示且支持独立样式 #

需要将花园名称和对应地址成对展示，同时两者能通过CSS分别设置样式，但当前实现要么地址显示undefined，要么先展示所有名称再展示所有地址，之前尝试的代码能成对但无法单独设置样式。

你尝试的代码 #

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;
  }
};

问题原因与解决方案 #

• 原因：之前的代码把名称和地址拼接成了一个字符串，没有给每个字段分配独立的HTML元素和class，导致无法单独设置样式；同时for...in遍历数组索引的逻辑错误，导致数据处理混乱。
• 修正代码：生成包含独立样式class的成对结构，每个花园项包含名称和地址两个元素：

// 生成单个花园的成对结构，分别给名称和地址加class
const createGardenItem = (name, address) => `
  <div class="garden-item">
    <h3 class="garden-name">${name}</h3>
    <p class="garden-address">${address || '暂无地址'}</p>
  </div>
`;

const getFeatures = async () => {
  const data = await fetchFeatures();
  const gardens = data.features.map(item => item.attributes);
  
  const listingsContainer = document.getElementById('listings');
  listingsContainer.innerHTML = ''; // 清空原有内容
  
  // 遍历每个花园，生成成对结构并插入容器
  gardens.forEach(garden => {
    listingsContainer.innerHTML += createGardenItem(garden.NAME, garden.ADDRESS);
  });
};

之后你就可以通过CSS分别设置.garden-name和.garden-address的样式了，比如：

.garden-name {
  color: #2c3e50;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.garden-address {
  color: #7f8c8d;
  font-size: 0.9rem;
  margin: 0;
}

学习资源推荐 #

• JavaScript基础：数组操作（map、forEach）教程、DOM元素操作指南
• API调用：REST API核心概念讲解、Fetch API使用教程
• 调试技巧：浏览器开发者工具Network面板查看API返回数据、Console面板调试代码逻辑
• GIS数据：GeoJSON格式基础（该API返回的是标准GeoJSON结构）

内容的提问来源于stack exchange，提问作者Dreamyth