2011-07-31 10 views
1

자바를 사용하여 this content을 구문 분석하고 싶습니다. 매 튜토리얼 온라인 어떻게 트위터를 사용하여 JSON을 구문 분석하는 방법을 가르쳐Javascript로 조작 된 JSON 구문 분석

{"ss":[["Thu","7:00","Final",,"BAL","19","ATL","20",,,"56808",,"PRE4","2015"],["Thu","7:00","Final",,"NO","10","GB","38",,,"56809",,"PRE4","2015"]]}

,하지만 난 JSON 작동 구문 분석하는 방법을 아주 확실하지 않다 : 데이터는 다음과 같습니다.

재미있는 프로젝트를위한 NFL 팀 점수와 JSON 파싱에 대한 좋은 학습 경험을보기 위해 웹 사이트에서 설정하고 싶습니다. Twitter에 대해 신경 쓰지 않아도됩니다.

이것이 가능합니까? 좋은 튜토리얼부터 시작하니? 심지어 일부 시작 코드?

답변

7

일반적으로 JSON.parse을 사용하면이 작업을 수행 할 수 있습니다. 그러나 해당 스 니펫은 엄격한 JSON (여기에 표시된 것처럼 http://jsfiddle.net/yK3Gf/ 및 원본 JSON 유효성 확인 : http://jsonlint.com/)으로 표시되지 않습니다.

그래서 수동으로 구문 분석하거나 nfl.com에서 JSON을 수정해야합니다. eval()를 사용할 때처럼 뭔가를 구문 분석 할 수 있도록 대안으로

그들의 JSON은 성공적으로 구문 분석 않습니다
var parsedData = eval('(' + jsonData + ')'); 

...

다음과 같이 : http://jsfiddle.net/yK3Gf/1/

비록 구문 분석하는 인식 이런 식으로 JSON은 (일반적으로 분석되는 데이터가 제 3 자 소스에 의해 전달되는 경우) 일반적으로 싫증이났다. XSS 공격에 개방 된 채로 데이터 내부에 실행 가능한 코드가 포함되어야한다.

+0

[크록 포드의 평가 가드] (https://github.com/douglascrockford/JSON-js/blob/ad6079cbd8dc362a3cc42e1f97c01aa5ccd48bfe/json2.js#L456) 스크립트 실행을 방지하십시오. 나는 항상한다. – user123444555621

+0

굉장한 조언 지금 내가 배우는 동안이 접근법을 활용할 것입니다. – allencoded

0

귀하의 주요 문제는 당신이에서 당기는 JSON은 4627.

은 무엇 당신이 할 수있는 것은 사본에는 JSON 데이터를 잡아이 도구 http://www.freeformatter.com/json-formatter.html

를 사용하여 형식 RFC에 따라 유효 잘못되었거나 아니라고 사실 그

는 포맷 된 버전이 후 당신은 당신이 실제로 응용 프로그램에서 document.write를 사용하지 말아야 JQuery와 아약스 호출

$.ajax({ 
    url: "your-formatted.json", 
    dataType: 'json', 

    success: function (data) { 

     for (var i = 0; i < data.ss.length; i++) { 
      document.write("Day: " + data.ss[i][0]); 
      document.write("<br/>"); 
      document.write("Time: " + data.ss[i][1]); 
      document.write("<br/><br/>"); 
     } 
    } 
}); 

를 사용할 수 있습니다. 이는 데이터를 표시하는 목적으로 만 사용됩니다.

0

구문 분석 할 올바른 JSON String (jsonString)이 있다고 가정 해 보겠습니다. (주어진 URL에서 XMLHttpRequest을 사용하여 구문 분석 할 String을 검색하는 방법을 모르는 경우 먼저 해당 URL을 조사해야합니다.

var json = json_parse(jsonString) ; 
  • link
  • : 네이티브 구현이없는 경우)


    일반 자바 스크립트를 사용하면 구문 분석 Function를 제공하기 위해 더글러스 크록 포드의 JSON 라이브러리 (또는 뭔가 유사한)를 추가해야합니다


Jav 당신이 그 구조를 알 필요가 있기 때문에 특정 데이터를 검색 할 수 있습니다 전에 jQuery를 같은 aScript 도서관이, Object는 완전히 다른 문제입니다 결과 JSON을 통과, 이제

var json = $.parseJSON(jsonString) ; 

될 것이다. 이 특별한 경우 - 그것은 참으로 잘 형성하는 경우 - 당신이 다음을 수행해야합니다 : - 재미있는 프로젝트를 진행 비 자바 스크립트 전문가 자바 스크립트와 함께 자신에 익숙해

var data = json.ss ; 

    for(var i = 0 ; i < data.length ; i++) { 

      var entry = data[i] ; 

      var day = entry[0] ; //!! the Arrays seem to have a format where the first entry always contains the data and so forth... 
      /* ... */ 

      // then do something with the data bits 

    } 
3

나는 비슷한 위치입니다 , 아약스, 그리고 json.

나는이 문제를 해결하기 위해 세 가지 단계를 거쳤습니다. 솔루션 개선에 대한 의견을 환영합니다.

첫 번째 단계는 nfl 사이트를 쿼리하여 점수를 낮추는 것입니다. json 소스 인 nfl 사이트는 사이트와 다르므로 도메인 간 쿼리에 대한 javascript 보안 제약 조건을 해결해야합니다. 나는이 stackoverflow link이 좋은 참조임을 알게되었습니다. 해결 방법으로 JSONP를 사용했습니다. 간접 사이트로 http://whateverorigin.org/을 사용했습니다.

$.getJSON('http://whateverorigin.org/get?url=' + encodeURIComponent('http://www.nfl.com/liveupdate/scorestrip/scorestrip.json') + '&callback=?', handleQueryForScoresResult); 

다른 사람들도 지적했듯이 nfl 사이트는 잘못된 json 데이터를 반환합니다. 다음 예제에서는 문제를 보여줍니다.

[ "Sun", "4:25", "Final",, "TEN", "7", "MIN", "30",,, "55571 ","REG5 ","2012 "],

빈 배열 요소 값 (사이에 데이터가없는 쉼표가 반복됨)에 유의하십시오. 그래서 내 JSON 콜백 함수에서, 내가 JSON 데이터 구문 분석 jQuery를 호출하기 전에 반복 쉼표로 빈 문자열 (두 개의 큰 따옴표)를 추가하여 데이터를 수정 :

function handleQueryForScoresResult(data) { 
    var jsonStr = data.contents; 
    jsonStr = jsonStr.replace(/,,/g, ',"",'); 
    jsonStr = jsonStr.replace(/,,/g, ',"",'); 

    var scoresData = jQuery.parseJSON(jsonStr).ss; 
    . 
    . 
    . 
} 

마지막을, 나는 GameScores는 JSON 데이터를 캡슐화하는 객체를 생성 .

function GameScore(scoreData) { 
    this.scoreData = scoreData; 
    scoreData[2] = scoreData[2].toLowerCase(); 
    scoreData[5] = parseInt(scoreData[5]); 
    scoreData[7] = parseInt(scoreData[7]); 
} 

function GameScore_getAwayTeam() { return this.scoreData[4]; } 
function GameScore_getHomeTeam() { return this.scoreData[6]; } 
function GameScore_isFinal() { return this.scoreData[2]=="final"; } 
function GameScore_getHomeTeamScore() { return this.scoreData[7]; } 
function GameScore_getAwayTeamScore() { return this.scoreData[5]; } 
function GameScore_doesHomeTeamLead() { return this.scoreData[7]> this.scoreData[5]; } 
function GameScore_doesAwayTeamLead() { return this.scoreData[5]> this.scoreData[7]; } 
function GameScore_getWeekId() { return this.scoreData[12]; } 

GameScore.prototype.getHomeTeam = GameScore_getHomeTeam; 
GameScore.prototype.getAwayTeam = GameScore_getAwayTeam; 
GameScore.prototype.isFinal = GameScore_isFinal; 
GameScore.prototype.getHomeTeamScore = GameScore_getHomeTeamScore; 
GameScore.prototype.getAwayTeamScore = GameScore_getAwayTeamScore; 
GameScore.prototype.doesHomeTeamLead = GameScore_doesHomeTeamLead; 
GameScore.prototype.doesAwayTeamLead = GameScore_doesAwayTeamLead; 
GameScore.prototype.getWeekId = GameScore_getWeekId; 

대부분의 데이터가 필요하지 않기 때문에 몇 개의 접근 자만 추가했습니다. 요구 사항은 다를 수 있습니다.

+0

더러운 JSON 정리 도움에 감사드립니다 ...이 NFL API가 나를 죽이고 있습니다. Mucho Gracias! –

0

이 특정 문제 (JSON 응답의 배열 내의 빈 인덱스)에 대해서는 lookahead 어설 션으로 정규 표현식을 대체했습니다.해당 요청을 고려하면 XMLHttpRequest 포함

request.responseText.replace(/,(?=,)/gm, ",\"\"") 

이 순서에 더 많은 쉼표가 ,"",,,을 설정하고 또한 경우에 작동합니다, 그래서 ,,,,"","",된다. 나중에 JSON.parse()을 사용할 수 있습니다.

0

이 조작 된 JSON은 dirty-json NPM 패키지 (저자입니다)가 구문 분석 할 수 있습니다.

현재 파서의 데모 테스트 할 수 있습니다

: https://rmarcus.info/dirty-json

파서는 다음과 같은 유효한 JSON과 동일하게 원래 문제의 JSON 해석 :

{ 
    "ss": [ 
     [ 
      "Thu", 
      "7:00", 
      "Final", 
      "BAL", 
      "19", 
      "ATL", 
      "20", 
      "56808", 
      "PRE4", 
      "2015" 
     ], 
     [ 
      "Thu", 
      "7:00", 
      "Final", 
      "NO", 
      "10", 
      "GB", 
      "38", 
      "56809", 
      "PRE4", 
      "2015" 
     ] 
    ] 
} 
사용할 수