서버에서 반환 된 JSON 데이터에서 JavaScript 객체를 만드는 방법

Question

도움이 필요합니다. AJAX 요청에서 객체를 반환하는 함수를 만들고 싶습니다. 서버의 데이터에서 다음과 같이 새 객체를 만들 수 있습니다 :

var foo = bar('api.php?x=y'); 

함수는 쿼리 문자열을 인수로 받아야하며 서버는 JSON으로 데이터를 반환합니다.

jQuery를 사용하여 이것을 수행하는 방법을 보여줄 수 있습니까? 아이디어/예제가 있습니까?

내가 잘못하고있는 것처럼 보였으므로 내 질문이 확장됩니다. 웹 응용 프로그램을 라이브 데이터 (주식 시세)을 기반으로 만들려고하므로 서버에서 업데이트 된 정보를 지속적으로 요청해야합니다. 응용 프로그램이 초기화되면 첫 번째 단계는 주식 (예 : 시세 기호 및 발급자)에 포함될 정적 데이터를 가져 오는 것입니다.이 작업을 수행하는 가장 좋은 방법은 서버에서 데이터베이스를 사용하는 것입니다. 쿼리를 실행하고 선택한 주식 데이터를 JSON으로 반환합니다. 다음 단계는 전체 데이터가 반환 될 때 템플릿 엔진을 사용하여 html로 렌더링 될 때 선택한 주식에 실시간 데이터 (예 : 가격 및 볼륨)를 반환하는 서버의 다른 API에 요청하는 것입니다. 그런 다음 앱은 실시간 데이터를 업데이트하고 다시 렌더링하기 위해 지속적으로 두 번째 API를 호출해야합니다. 또한 새로운 주식을 선택하고 프로세스를 다시 시작할 수 있어야합니다.

나는 이런 식으로 응용 프로그램을 구성하는 가장 좋은 방법은 데이터를 나중에 (예 : 정렬 및 필터링) 수정할 수있는 자체 메서드가있는 사용자 지정 개체 안에 두는 것이라고 생각하므로 foo은 주식 데이터 나는 foo.sort(), 또는 foo.render()과 같은 것을 데이터의 HTML 표현을 만들기 위해 할 수있다. 그래서 AJAX 호출에서 반환 한 데이터에서 객체를 만드는 것이 가장 좋은 방법이라고 생각했습니다. 이것이 올바른 방식으로이 앱을 구성하거나 올바른 방향으로 나를 가리키게 할 수 있는지 말해 주시겠습니까?

감사

Answer 1

JSON 문자열이 서버가 단지와 JS 객체로 변환 쉽게, 응답 어떤 경우 ...

var resp_object = JSON.parse(response); 

Answer 2

AJAX는 정의에 의해 비동기, 그래서 '아무튼 귀하의 질문에 특히 잘 맞습니다. 내가 대신 콜백 (see reference) jQuery.ajax를 사용하는 것이 좋습니다 :

$.ajax({ 
    url: 'api.php?x=y', 
    dataType: 'json', 
    success: function (foo) { 
    // Do stuff here using 'foo' 
    } 
}); 

Answer 3

을 당신은 당신의 접근 방식에 동 기적으로 생각하고있다.

이것은 함수 호출 "bar ('api.php? x = y')"가 검색된 데이터/객체를 즉시 반환해야한다고 생각한다는 것을 의미합니다. 이것은 브라우저에서 코드 실행이 응답을 기다리는 동안 차단된다는 단점이 있습니다.

이것을 해결하려면 user595228이 지적한대로 비동기 콜백 핸들러 ("jQuery.ajax"으로 작업 할 때 "success"핸들러)를 만들어야합니다. 반환 된 정보를 렌더링하는 코드는이 처리기로 들어갑니다.

코드를 구조화하는 방법에 대한 질문은 사용자가 얻는 데이터의 복잡성과 응용 프로그램에서 사용하는 빈도에 달려 있습니다. 복합체가 여러 곳에서 사용되면 헬퍼 함수를 ​​사용하여 데이터 객체를 생성하고 코드 중복을 방지하고 데이터와 관련된 코드를 한 곳에서 처리하는 것이 좋습니다.한 곳에서 렌더링 만하는 경우 단순한 정렬 및 표시 만 수행하면 복잡성을 줄이기 위해 간단한 논리로 논리를 배치 할 것입니다.

Answer 4

Jquery 플러그인을 만들고 개체를 연결할 수 있습니다. 예 :

var foo = tablesort({}); // tablesort is plugin Jquery 
foo.sort(); 

당신은, 그것은 의미 jQuery 플러그인의 정렬 방법을 구현해야 뭔가

Answer 5

이 라이브 데이터가 당신에게 밀려되어 서버에서 아약스를 사용하여 데이터를 얻을 개체의 속성을 채우거나합니까? 그 말은 데이터를 잃어 버리는 순간에 듣고있는 것이 없다면 말입니다. 또는 대기열에 대기열로 쌓여서 투표를하고 기다릴 수 있습니까?

첫 번째 상황 인 경우 서버에서 재고 서비스의 데이터를 가져 와서 대기열에 넣을 수 있습니다. 그러면 여러 사용자의 대기열을 어떻게 처리 할 수 ​​있습니까? 또는 websocket (HTML5는 모든 브라우저에서 지원되지 않음)을 설정하거나 혜성 솔루션 (플래시 객체 또는 빠른 폴링 포함)을 살펴볼 수 있습니다.

상황 번호가 2이면 Ajax를 사용하여 타이머에서 사용할 수있는 데이터 블록을 가져올 수 있습니다. 비공개 아약스를 사용해야하거나 화면이 응답 대기 중일 수 있습니다. jquery와 같은 것을 사용하면 그 과정을 도울 수 있습니다. 바퀴를 다시 만들 필요가 없습니다.

Answer 6

나는 보통 데이터 그 자체와 별도로 데이터의 표시를 유지하는 것을 선호합니다. 서버에서 객체를받은 후에 객체에 함수를 추가하는 대신 데이터 객체를 전달하는 것이 좋습니다.

예 :

function renderStockData(data) { 
    // build and return HTML from data 
} 

function loadStockData(url, callback) { 
    $.ajax({ 
    url: url, 
    dataType: 'json', 
    success: callback 
    }); 
} 

// Later that day... 
loadStockData('api?stock=GOOG', function (data) { 
    var renderedHtml = renderStockData(data); 
    // ... 
}); 

이 당신이 찾고있는 조언의 종류인가?