JSONデータはどうすればよいですか？

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

基本的にHTMLでデータをレンダリングする必要があります。オブジェクトを解析し、それをどのようにレンダリングする必要があります。 JCLinkのドキュメントによると、JSONオブジェクトが提供されています。だからあなたがしなければならないのは、そのデータを取り出してレンダリングすることだけです。

このようなものです。これは、あなたが望むようにレンダリングしませんが、あなたが望むことをするためにHTMLとCSSを変更することができます。

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;

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

Answer 2

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

つまり、あなたの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

Answer 3

あなたはそれを使ったことがない場合はJSONは少し注意が必要です。私はそれをたくさん使っています。 JSONはJavaScript Object Notationであり、AJAXのようなものに大きく使用されます。ここでJSONの全体を説明するのは実用的ではないので、hereはあなたに役立つサイトです。 Thisは、私が複雑なJSONオブジェクトを視覚化するために使用する貴重なツールです。

あなたが投稿した画像は、JSONからまっすぐに送られることはありません。それはHTML、CSS、JavaScriptの組み合わせなので、あなたの質問は単なるJSONよりも幅広いかもしれません。 JSONは単に表示する情報やモデルのコンテナとして機能します。読んだ後で理解できないJSONに関するものがある場合は、もっと具体的な質問をしてください。私は助けに全力を尽くします！