JSON 데이터로 무엇을합니까?

Question

나는 아주 초보자의 질문을 알고있다. ...

나는 JCink에서 포럼을 만들고있다. 사용자 프로파일을 사용자 정의 할 수 있지만 JSON 형식의 데이터를 제공합니다. JSON이 무엇인지 모호한 생각이 들지만 실제로 어떻게해야 할 지 확신합니다. 나는 그것을 특정한 방식으로 보이게하고 싶지만 어떻게 시작 해야할지 모르겠습니다.

누구든지 알아낼 수 있습니까? 이 데이터로 수행해야 할 작업을 Google에서 검색했지만 실제로 도움이되지 않았습니다 ... ^^;

I가 주어지고있어 코드는 이것이다 :

[ 
    { 
    "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

내가 밖으로 나를 위해 그것을 평면에 당신을 필요로하지 않습니다, 심지어 어떤 포인터를 내가 무엇 do이 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에 대해 더 구체적인 질문이 있으면 언제든지 도와 드리겠습니다.