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>

更新

这是生成JSON数据的C＃代码。 JSON在另一个C＃文件中重命名为MISREST / images：

    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\" }";
        }
    }

定义API路径的C＃文件（这是定义图像文件路径的部分）：

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

Answer 1

我不完全清楚这是哪种情况，但根据您的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需要被构造为一个数组，当迭代该数组时，你需要引用数组中的每个对象而不是父对象{ {1}}就像你在做的那样：

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
  });
});

Answer 2

尝试引用val函数中作为函数参数传递的each：

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

如何使用Jquery将JSON值输出到DOM

2 个答案: