복붙노트

[JQUERY] 어떻게 jQuery를 / 자바 스크립트로 JSON 데이터를 구문 분석?

JQUERY

어떻게 jQuery를 / 자바 스크립트로 JSON 데이터를 구문 분석?

해결법


  1. 1.서버 측 스크립트를 가정하면 적절한 콘텐츠 유형을 설정하지 않습니다 : 응용 프로그램 / JSON 응답 헤더 당신이 데이터 유형을 사용하여이 JSON 것을 jQuery를에 표시해야합니다 : 'JSON'매개 변수입니다.

    서버 측 스크립트를 가정하면 적절한 콘텐츠 유형을 설정하지 않습니다 : 응용 프로그램 / JSON 응답 헤더 당신이 데이터 유형을 사용하여이 JSON 것을 jQuery를에 표시해야합니다 : 'JSON'매개 변수입니다.

    그런 다음 데이터를 통해 루프에 $ .each () 함수를 사용할 수 있습니다 :

    $.ajax({ 
        type: 'GET', 
        url: 'http://example/functions.php', 
        data: { get_param: 'value' }, 
        dataType: 'json',
        success: function (data) { 
            $.each(data, function(index, element) {
                $('body').append($('<div>', {
                    text: element.name
                }));
            });
        }
    });
    

    또는 $ .getJSON 방법을 사용 :

    $.getJSON('/functions.php', { get_param: 'value' }, function(data) {
        $.each(data, function(index, element) {
            $('body').append($('<div>', {
                text: element.name
            }));
        });
    });
    

  2. 2.데이터 유형을 설정 : 'JSON'을 당신을 위해 JSON을 구문 분석합니다 :

    데이터 유형을 설정 : 'JSON'을 당신을 위해 JSON을 구문 분석합니다 :

    $.ajax({
      type: 'GET',
      url: 'http://example/functions.php',
      data: {get_param: 'value'},
      dataType: 'json',
      success: function (data) {
        var names = data
        $('#cand').html(data);
      }
    });
    

    아니면 당신은 parseJSON을 사용할 수 있습니다 :

    var parsedJson = $.parseJSON(jsonToBeParsed);
    

    그런 다음 다음을 반복 할 수 있습니다 :

    var j ='[{"id":"1","name":"test1"},{"id":"2","name":"test2"},{"id":"3","name":"test3"},{"id":"4","name":"test4"},{"id":"5","name":"test5"}]';
    

    ... $ ()를 사용하여 각. :

    var json = $.parseJSON(j);
    $(json).each(function (i, val) {
      $.each(val, function (k, v) {
        console.log(k + " : " + v);
      });
    }); 
    

    JSFiddle


  3. 3.코드를 다음 시도, 내 프로젝트에서 작동 :

    코드를 다음 시도, 내 프로젝트에서 작동 :

    //start ajax request
    $.ajax({
        url: "data.json",
        //force to handle it as text
        dataType: "text",
        success: function(data) {
    
            //data downloaded so we call parseJSON function 
            //and pass downloaded data
            var json = $.parseJSON(data);
            //now json variable contains data in json format
            //let's display a few items
            for (var i=0;i<json.length;++i)
            {
                $('#results').append('<div class="name">'+json[i].name+'</>');
            }
        }
    });
    

  4. 4.

     $(document).ready(function () {
        $.ajax({ 
            type: 'GET', 
            url: '/functions.php', 
            data: { get_param: 'value' }, 
            success: function (data) { 
             for (var i=0;i<data.length;++i)
             {
             $('#cand').append('<div class="name">data[i].name</>');
             }
            }
        });
    });
    

  5. 5.그 코드를 사용합니다.

    그 코드를 사용합니다.

         $.ajax({
    
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Your URL",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    alert(data);
                },
                error: function (result) {
                    alert("Error");
                }
            });
    

  6. 6.확인 나는 문제점과 같은 난에서 [] 제거하여 이런 문제를 해결할 [{ "키": "값"}] :

    확인 나는 문제점과 같은 난에서 [] 제거하여 이런 문제를 해결할 [{ "키": "값"}] :

    echo json_encode(array_shift($your_variable));
    
     success: function (data) {
        var result = $.parseJSON(data);
          ('.yourclass').append(result['your_key1']);
          ('.yourclass').append(result['your_key2']);
           ..
        }
    

    또한 당신은 루프를 원하는 경우 수


  7. 7.나는 위의 모든 솔루션으로 동의하지만,이 문제의 근본 원인은 무엇보다 코드에서 중요한 역할을 한 선수는 코드 줄 것을, 뭐죠 지적 :

    나는 위의 모든 솔루션으로 동의하지만,이 문제의 근본 원인은 무엇보다 코드에서 중요한 역할을 한 선수는 코드 줄 것을, 뭐죠 지적 :

    dataType:'json'
    

    이 라인 (선택 사항입니다) 그리워 할 때, 서버에서 반환 된 데이터는 (디폴트 리턴 타입 인) 전체 길이 문자열로 처리됩니다. 코드 정보 용의 jQuery이 라인을 추가하면 JSON 객체로 가능한 JSON 문자열을 변환합니다.

    JSON 데이터 오브젝트를 기대하고있는 경우 jQuery를 아약스 호출이 줄을 지정해야합니다.


  8. 8.

    var jsonP = "person" : [ { "id" : "1", "name" : "test1" },
      { "id" : "2", "name" : "test2" },
      { "id" : "3", "name" : "test3" },
      { "id" : "4", "name" : "test4" },
      { "id" : "5", "name" : "test5" } ];
    
    var cand = document.getElementById("cand");
    var json_arr = [];
    $.each(jsonP.person,function(key,value){
        json_arr.push(key+' . '+value.name  + '<br>');
        cand.innerHTML = json_arr;
    });
    
    <div id="cand">
    </div>
    

  9. 9.JSON 데이터

    JSON 데이터

    data = {"clo":[{"fin":"auto"},{"fin":"robot"},{"fin":"fail"}]}
    

    때 검색

    $.ajax({
      //type
      //url
      //data
      dataType:'json'
    }).done(function( data ) {
    var i = data.clo.length; while(i--){
    $('#el').append('<p>'+data.clo[i].fin+'</>');
    }
    });
    

  10. 10.

    $.ajax({
      url: '//.xml',
      dataType: 'xml',
      success: onTrue,
      error: function (err) {
          console.error('Error: ', err);
      }
    });
    
    $('a').each(function () {
      $(this).click(function (e) {
          var l = e.target.text;
          //array.sort(sorteerOp(l));
          //functionToAdaptHtml();
      });
    });
    
  11. from https://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript by cc-by-sa and MIT license