创建从 JSON 到 HTML 的布局

Posted 2023-03-05

【中文标题】创建从 JSON 到 HTML 的布局

【英文标题】：Create a layout from JSON to HTML

【发布时间】：2016-12-26 01:14:13

【问题描述】：

我需要创建一个布局，它将在 html div 标签中显示 JSON 数据。

类似于标题的h4标签、描述的p标签和图片的img标签。

最好和最简单的方法是什么？

【问题讨论】：

你有什么尝试吗？

不，我很困惑。我应该使用 jQuery、纯 javascript 还是使用其他一些框架来做到这一点？我正在寻找最好和最简单的方法以及一些解释方法和原因。

这个话题已经在这个链接里讨论过了，你可以参考：***.com/questions/883977/display-json-as-html

【参考方案1】：

有无数种方法可以做到这一点。 JQuery 倾向于使你正在寻找的那种 DOM 操作更容易，我个人推荐它，但你没有理由不能使用 Vanilla JS。

假设您选择走 JQuery 路线，这里有一个 JFiddle 可以帮助您入门：https://jsfiddle.net/Lf7j3xst/1/

基本上，您需要将 json 解析为一个对象，然后迭代其中的值，并根据需要将数据附加到您的文档中。您在这里所做的很大程度上取决于所讨论的特定 json 格式，因此这只是一个示例，因为我不知道您处理的是什么数据。

我的代码基于的示例 json：

  "title": "Hello",
  "image": "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150",
  "paragraph": "Lorem ipsum dolor sit amet, nam ut iracundia appellantur. An nibh impedit dolorem eos, dico definitiones vix an, pri ad simul tollit. Quo aperiri admodum appetere id. Duo harum consulatu ea, etiam altera deleniti ea sea, atqui nominavi scripserit vel cu. Ut nam errem choro iuvaret, sea natum rationibus no. Maiestatis disputationi ad mel."

示例代码：

var parsed = JSON.parse(example);

$.each(parsed, function(key, item) 
  if (key == "image") 
    $('#main').append('<img src="' + item + '" />');
  
  if (key == "title") 
    $('#main').append('<h1>' + item + '</h1>');
  
  if (key == "paragraph") 
    $('#main').append('<p>' + item + '</p>');
  
)

这应该足以让您入门。花一些时间阅读 JQuery 文档。