Jquery를 사용하여 DOM에 JSON 값을 출력하는 방법

Question

이것은 어리석은 질문 일 수도 있지만 어제와 오늘 하루 종일이 문제를 조사하고 명확한 대답을 찾는 데 어려움을 겪고있는 멍청한 반응입니다.

JSON API 호출의 단일 키 : 값 쌍에서 값을 분리하는 데 문제가 있습니다. 아래의 코드에서 로컬로 호스팅 된 JSON 파일을 호출하려고하며 "maxFileSize"값을 가져 오려고합니다.

호출되는 JSON은 다음과 같습니다 ("maxFileSize": "10MB"). 개체 키 "maxFileSize"를 사용하여 값을 가져 와서 내 HTML의 div 태그에 추가하고 싶습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

<div id="randominfo"></div> 

<script src="jquery-3.2.1.min.js"></script> 
<script> 

    $(document).ready(function(){ 
    $.getJSON('http://localhost/MISREST/images', function (data) { 
     $.each(JSON.parse(data), function (key, val) { 
     $("#randominfo").append(data.maxFileSize + " "); 
    }); 
}); 



}); 


</script> 

UPDATE 여기

는 JSON 데이터를 생성하는 C# 코드이다.

public string JSONGetImageFiles() 
    { 
     if (Directory.Exists(SmSystemConfig.ImageFilePath)) 
     { 
      DirectoryInfo dir = new DirectoryInfo(SmSystemConfig.ImageFilePath); 
      FileInfo[] fileEntries = dir.GetFiles(); 
      StringBuilder toReturn = new StringBuilder(""); 

      toReturn.Append("{\"maxFileSize\" : \"10 MB\", \"fileList\" : ["); 

      if (fileEntries.Length != 0) 
      { 
       int count = 0; 
       foreach (FileInfo file in fileEntries) 
       { 
        if (file.Extension.ToLower() == ".jpg" || file.Extension.ToLower() == ".png" || file.Extension.ToLower() == ".gif") 
        { 
         count++; 
         toReturn.AppendFormat("{{\"fileName\" : \"{0}\", \"href\" : \"{1}{2}\",", file.Name.Remove(file.Name.LastIndexOf(".")), SmSystemConfig.ImagePath, file.Name); 
         toReturn.AppendFormat("\"uploadDate\" : \"{0}\",", file.CreationTime.ToString("MM/dd/yyyy")); 
         toReturn.AppendFormat("\"fileSize\" : \"{0}\"}},", GetFileSize(file.Length)); 
        } 
       } 
       if (count != 0) 
        toReturn.Replace(",", "]}", toReturn.Length - 1, 1); 
       else 
        toReturn.Append("\"None\"]}"); 
      } 
      else 
      { 
       toReturn.Append("\"None\"]}"); 
      } 
      return toReturn.ToString(); 
     } 
     else 
     { 
      WebOperationContext.Current.OutgoingResponse.StatusCode = System.Net.HttpStatusCode.NotFound; 
      WebOperationContext.Current.OutgoingResponse.StatusDescription = "Directory Not Found"; 
      return "{ \"errorMessage\" : \"generror\" }"; 
     } 
    } 

C#을 파일 API 경로가 (이 이미지 파일 경로가 정의 된 섹션) 정의 :

[WebInvoke(
     Method = "GET", 
     BodyStyle = WebMessageBodyStyle.Bare, 
     UriTemplate = "images", 
     ResponseFormat = WebMessageFormat.Json)] 
    [OperationContract] 
    string JSONGetImageFiles(); 

Answer 1

시도가 참조하는 JSON은 다른 C#을 파일에 MISREST/이미지로 이름이 변경됩니다

$.each(JSON.parse(data), function (key, val) { 
    $("#randominfo").append(val.maxFileSize + " "); 
}); 

Answer 2

그것은 사건이 어떤 나에게 완전히 명확하지 않다,하지만 기반으로 다음 each 함수 내에서 함수 인수로 전달되고있는 val C# 코드와 위 답변에 대한 귀하의 의견에 따르면 JSON 파일은 단일 객체이거나 (.each은 그 안에있는 데이터에 액세스 할 필요가 없음) 객체 사이에 구분 기호가없는 일련의 객체입니다 (JSON.parse은 . 오류)

하나의 객체를 가정하면, 당신은 지금처럼 MAXFILESIZE을 얻을 것입니다 :

var data = '{"maxFileSize" : "10 MB", "fileList" : [{"fileName" : "1_Exterior Cabinet_Cabinet C_Economizer_Econ_Exhaust_Gas Heat", "href" : "../Images/1_Exterior Cabinet_Cabinet C_Economizer_Econ_Exhaust_Gas Heat.jpg"}]}'; 
 

 
$('#go').click(function() { 
 
    $("#randominfo").append(JSON.parse(data).maxFileSize + " "); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="go">Go</button> 
 
<div id="randominfo"></div>

은 당신이 진짜로하려는 것은 객체의 배열의 JSON 요구입니다 가정 구로 구성되다 해당 배열을 반복 할 때 당신이하고있는 것처럼 님, 당신은 배열 내부 대신의 부모 data에 각 개체를 참조 할 필요가 :

var data = '[{"maxFileSize" : "10 MB", "fileList" : [{"fileName" : "1_Exterior Cabinet_Cabinet C_Economizer_Econ_Exhaust_Gas Heat", "href" : "../Images/1_Exterior Cabinet_Cabinet C_Economizer_Econ_Exhaust_Gas Heat.jpg"}]}, {"maxFileSize": "20MB", "fileList": []}]'; 
 

 

 
$('#go').click(function() { 
 
    $.each(JSON.parse(data), function(key, val) { 
 
    $("#randominfo").append(val.maxFileSize + " "); // <-- not data.maxFileSize 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="go">Go</button> 
 
<div id="randominfo"></div>