如何将API返回的已解析JSON数据展示到UI中？

嘿，我来帮你搞定把解析后的JSON转成UI可展示数据的事儿！先看看你给的JSON结构，咱们一步步拆解来做：

先把你提供的示例JSON贴出来，方便咱们对照：

{ 
  "query": "milk", 
  "sort": "relevance", 
  "responseGroup": "base", 
  "totalResults": 693, 
  "start": 1, 
  "numItems": 10, 
  "items": [
    { 
      "itemId": 10291863, 
      "parentItemId": 10291863, 
      "name": "Carnation Vitamin D Adde..." 
    }
  ] 
}

这里的数据明显分成两类：搜索元数据（比如搜索关键词、总结果数、每页展示数量这些）和商品条目数据（items数组里的每个商品），刚好对应你提到的两个模型，完美！

不管你用什么语言/框架，第一步都是把原始JSON的字段转换成和你业务模型匹配的格式——这样后续UI渲染会更顺手，也更贴合业务逻辑。我用JavaScript举个例子，假设你的两个模型是SearchMetadata和ProductItem：

// 假设你已经把API返回的JSON解析成了JS对象，存在parsedData变量里
const parsedData = { /* 你的解析后数据 */ };

// 映射搜索元数据到模型
const searchMetadata = {
  searchKeyword: parsedData.query,
  sortType: parsedData.sort,
  totalProducts: parsedData.totalResults,
  currentPageStart: parsedData.start,
  itemsPerPage: parsedData.numItems
};

// 映射商品列表到模型数组
const productList = parsedData.items.map(item => ({
  productId: item.itemId,
  parentProductId: item.parentItemId,
  productName: item.name
}));

这里我把JSON里的字段名改成了更贴合业务的命名，比如query改成searchKeyword，这样后续写UI的时候一眼就知道是什么意思，不用反复对照原始JSON。

接下来分两种常见场景给你示例：

原生JavaScript渲染 #

如果你用原生JS写页面，先在HTML里准备好展示容器：

<!-- 搜索元数据展示区 -->
<div class="search-info">
  <h3>搜索结果</h3>
  <p>关键词：<span id="search-keyword"></span></p>
  <p>共找到 <span id="total-count"></span> 件商品，当前显示第 <span id="start-item"></span>-<span id="end-item"></span> 件</p>
</div>

<!-- 商品列表展示区 -->
<ul id="product-list"></ul>

然后用JS把数据填充进去：

// 填充元数据
document.getElementById('search-keyword').textContent = searchMetadata.searchKeyword;
document.getElementById('total-count').textContent = searchMetadata.totalProducts;
document.getElementById('start-item').textContent = searchMetadata.currentPageStart;
document.getElementById('end-item').textContent = searchMetadata.currentPageStart + searchMetadata.itemsPerPage - 1;

// 填充商品列表
const listContainer = document.getElementById('product-list');
productList.forEach(product => {
  const listItem = document.createElement('li');
  // 可以给商品名称加个tooltip显示完整名称（因为示例里的name是截断的）
  listItem.textContent = product.productName;
  listItem.title = product.productName;
  listItem.dataset.productId = product.productId;
  listContainer.appendChild(listItem);
});

React框架下渲染 #

如果用React，直接把映射好的数据作为组件的props，在JSX里渲染就行，非常直观：

function SearchResults({ searchMetadata, productList }) {
  // 计算当前页的结束条目数
  const endItem = searchMetadata.currentPageStart + searchMetadata.itemsPerPage - 1;

  return (
    <div className="search-results">
      <div className="search-metadata">
        <h3>搜索关键词：{searchMetadata.searchKeyword}</h3>
        <p>共找到 {searchMetadata.totalProducts} 件商品，当前显示第 {searchMetadata.currentPageStart}-{endItem} 件</p>
      </div>
      <ul className="product-list">
        {productList.length === 0 ? (
          <li>暂无相关商品</li>
        ) : (
          productList.map(product => (
            <li key={product.productId} title={product.productName}>
              {product.productName}
            </li>
          ))
        )}
      </ul>
    </div>
  );
}

// 使用组件时传入映射好的数据
<SearchResults searchMetadata={searchMetadata} productList={productList} />

• 处理空数据：如果items数组为空，一定要在UI里显示“暂无商品”的提示，别让页面空白着
• 截断文本处理：示例里的name是截断的，你可以给元素加title属性显示完整名称，或者如果API支持的话，请求完整名称字段
• 加载状态：如果API请求是异步的，记得在数据返回前显示加载动画，比如转圈的图标，提升用户体验

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