将 JSON 对象数据打印到 HTML答案

【问题标题】：Printing JSON object data to HTML将 JSON 对象数据打印到 HTML
【发布时间】：2021-06-05 20:09:12
【问题描述】：

我正在尝试编写一个 html 代码来显示我的软件产品的当前版本（类似于 "v1.0.0"），并打印来自 JSON 文件的数据。

在我的服务器中有一个 JSON 文件存储我的软件产品版本数据，如下所示（假设位置是 https://testsite.com/myproductversion.json）：

{
  "Name": "MyProduct",
  "MajorVersion": "1",
  "MinorVersion" : "0",
  "MaintenanceVersion" : "0"
}

有可能吗？任何帮助将不胜感激。

【问题讨论】：

一点也不难。使用 ajax 获取 json 并将每个属性与要插入文本的元素匹配。这两个步骤都很容易研究
stackoverflow.com/questions/57939053/…
您好，感谢您的快速回答。我是新手，对不起。可以用 HTML 制作吗？我将在 Wordpress 文本编辑器中使用此 html 代码。我将在 wordpress 中哪里使用 ajax？

标签： javascript html jquery json object

【解决方案1】：

fetch('/myproductversion.json').then(res => res.json())
.then(({ MajorVersion, MinorVersion, MaintenanceVersion }) => {
  let version = `v${MajorVersion}.${MinorVersion}.${MaintenanceVersion}`;
  $('.my-version-goes-here').html(version);
}).catch(console.error);

只需使用 fetch 来请求数据。

【讨论】：

您好，感谢您的快速回答。可以用 HTML 制作吗？我将在 Wordpress 文本编辑器中使用此 html 代码。谢谢你的帮助....

【解决方案2】：

我希望我能正确理解您的问题。许多方法之一是使用 jquery/js。

这里有一个小sn-p给你举个例子

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });
 
  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

【讨论】：

您好，感谢您的快速回答。可以用 HTML 制作吗？我将在 Wordpress 文本编辑器中使用这个 html 代码。谢谢你的帮助....