Question

我知道，这是一个非常新手的问题......

我正在JCink上创建一个论坛。它们允许您自定义用户配置文件，但它为您提供了一些JSON格式的数据。我对JSON是什么有一个模糊的概念，但我真的很清楚我应该用它做些什么。我想让它看起来有某种方式，但我不知道如何开始。

任何人都可以帮我搞清楚吗？我试着在Google上搜索我应该对这些数据做些什么，但它并没有真正帮助...... ^^;

我正在给出的代码是：

[
  {
    "contact_id": "3",
    "friend_avatar": "http://pjonline.b1.jcink.com/uploads/pjonline/av-3.jpg",
    "friend_name": "acetest",
    "posts": "2",
    "active": "3 Nov 2016, 06:32:23"
  }
]

我希望看起来像这样：http://prntscr.com/d2pbks

我不需要你为我做这件事，但是对于我甚至做这个JSON数据的一些指示会非常棒。

Answer 1

如果您从未使用它，JSON可能有点棘手。我经常使用它，有时它仍然让我感到困惑，所以不用担心！ JSON是JavaScript Object Notation，主要用于像ajax这样的东西。在这里解释JSON的全部内容并不实用，因此here是一个可能对您有所帮助的网站。 This也是我用来可视化复杂JSON对象的有用工具。

现在，您发布的图片并非直接来自JSON。这是HTML，CSS和JavaScript的组合，因此您的问题可能比JSON更广泛。 JSON只是作为要显示的信息或模型的容器。如果您在阅读后无法理解JSON的某些内容，请随时提出更具体的问题，我会尽力帮助您！

Answer 2

您基本上想要以HTML格式呈现数据。您必须解析对象并按照您想要的方式呈现它。根据JCLink文档，您提供了JSON对象。所以你要做的就是获取数据并进行渲染。

像这样的东西。这并不是你想要的，但你可以修改HTML和CSS来做你想要的。

＆＃13;

var jsonData = [{
  "contact_id": "3",
  "friend_avatar": "http://pjonline.b1.jcink.com/uploads/pjonline/av-3.jpg",
  "friend_name": "acetest",
  "posts": "2",
  "active": "3 Nov 2016, 06:32:23"
},{
  "contact_id": "5",
  "friend_avatar": "http://pjonline.b1.jcink.com/uploads/pjonline/av-2.jpg",
  "friend_name": "dingo",
  "posts": "8675309",
  "active": "1 Nov 2016, 06:32:23"
}];

var htmlOut = "";

for (var i = 0, numProfiles = jsonData.length; i < numProfiles; ++i) {
  var thisData = jsonData[i];
  htmlOut += "<div>";
  htmlOut += "<h1>" + thisData.friend_name + "</h1>";
  htmlOut += "<img src='" + thisData.friend_avatar + "' />";
  htmlOut += "<br />";
  htmlOut += "posts: " + thisData.posts;
  htmlOut += "<br />";
  htmlOut += "active: " + thisData.active;
  htmlOut += "</div>";
}

document.getElementById("profiles").innerHTML = htmlOut;

＆＃13;

<div>
  <h1>Friends</h1>
  <div id="profiles"></div>
</div>

＆＃13;

Answer 3

＆＃13;

var json = {"contact_id":"3","friend_avatar":"http:\/\/pjonline.b1.jcink.com\/uploads\/pjonline\/av-3.jpg","friend_name":"acetest","posts":"2","active":"3 Nov 2016, 06:32:23"};
document.write('contact_id:' + json.contact_id);

＆＃13;

所以你想将值呈现给你的HTML？

由于JSON是有效对象，因此您无需解析它，否则如果它是一个字符串，则您需要JSON.parse(json)。

这样的东西，但当然这只是一个如何在你的html中输出json的例子。非常确定将值放在divs中会很容易。

var json = {"contact_id":"3","friend_avatar":"http:\/\/pjonline.b1.jcink.com\/uploads\/pjonline\/av-3.jpg","friend_name":"acetest","posts":"2","active":"3 Nov 2016, 06:32:23"};
document.write(json.contact_id);

https://plnkr.co/edit/MyiE16jLtM2g6xRlCocb?p=preview

我如何处理JSON数据？

3 个答案: