Question

我正在尝试在按钮单击时获取JSON数据并填充选择标记。按钮ID和JSON对象名称相同。当我将按钮ID传递给 $。each（data.Technical.x， 它没有取得任何价值。

但是，如果我给 $。每个（data.Technical.JAVA，，选择标签正在填补

HTML

<a href="#fourth" id="JAVA" class="btn btn-info" onClick="loadJson(this.id)">JAVA</a>
<label id="subjTitle"> </label> 
<label id="topiclabel"> This is Topic :- </label> 
<select id="dropDownDest" > 
   <option selected>Select Subject First</option>    
</select>

脚本

function loadJson(x) {
dropdown_clear();
var a = document.getElementById(x).text;
document.getElementById("subjTitle").innerHTML=a;
$(document).ready(function(){   
    $.getJSON('jsondata/data.json', function(data) {
        console.log(data);
        $.each(data.Technical.x, function (key,value) {
            var $option = $("<option/>").attr("value",value).text(value);
            $("#dropDownDest").append($option);
            $('#dropDownDest').change(function () {
                var x= $(this).val();
                document.getElementById("topiclabel").innerHTML=x;
            });
        });                         
    });
});}

JSON FILE

{

"Technical": {

    "JAVA": {
        "1": "Core java ",
        "2": "Jdbc",
        "3": "Servlet",
    "4": "JSP",
    "5": "Struts 1.X",
    "6": "Ejb 2.0",
    "7": "Spring (Core , AOP, Remoting, JMX JMS)",
    "8": "Hibernate",
    "9": "Webservice",
    "10": "Maven",
    "11": "Threads Implementation",
    "12": "Design Patterns",
    "13": "Unix",
    "14": "SQL Server",
    "15": "Sybase",
    "16": "Oracle",
    "17": "Others DB (mention details)",
    "18": "Automated Unit Testing (mention tools)",
    "19": "Nunit",
    "20": "Mockito",
    "21": "Continous Build & Integration (mention tools)",
    "22": "Agile Development",
    "23": "Test Driven Development (TDD)",
    "24": "Atlassian Toolchain (JIRA, Confluence)",
    "25": "Any thing else worth highlighting",

    },
    "C++": {
        "1": "Multi-threading",
        "2": "STL",
        "3": "Boost",
    "4": "Object Oriented Design & Development",
    "5": "UNIX/Linux",
    "6": "IDEs (mention name of IDEs used)",
    "7": "Perl",
    "8": "Java",
    "9": "Scripting (mention details)",
    "10": "COM/COM+",
    "11": "Automated Unit Testing (mention tools)",
    "12": "Test Driven Development (TDD)",
    "13": "Continous Build & Integration (mention tools)",
    "14": "Agile Development",
    "15": "Any thing else worth highlighting",          

    },
    "C#": {
        "1": "Multi-threading",
        "2": "WPF",
        "3": "WCF",
    "4": "Remoting",
    "5": "ASP.NET",
    "6": "Winforms",
    "7": "Windows Services",
    "8": "3rd Party Controls (mention details)",
    "9": "Scripting (mention details)",
    "10": "COM/COM+",
    "11": "SQL Server",
    "12": "Sybase",
    "13": "Oracle",
    "14": "Others DB (mention details)",
    "15": "Automated Unit Testing (mention tools)",
    "16": "Continous Build & Integration (mention tools)",
    "17": "Agile Development",
    "18": "Test Driven Development (TDD)",
    "19": "Any thing else worth highlighting",

    },

    "Functional": {
        "1": "Front Office Systems",
        "2": "Back Office Systems",
        "3": "Middle Office Systems",
    "4": "Fixed Income Systems",
    "5": "FX Systems",
    "6": "Equities Systems",
    "7": "Pricing Systems",
    "8": "Low Latency Systems",
    "9": "Exchange/Vendor Connectivity Systems",
    "10": "Trade Capture Systems",
    "11": "Risk Management Systems",
    "12": "Any thing else worth highlighting",

    }
}}

Answer 1

问题与JSON文件有关，它的格式错误，因此$ .getJSON中的成功方法不解析它。您可以使用http://jsonlint.com/检查JSON文件 jsonlint error

Answer 2

以下是代码：当我们传递id或类并将其存储在另一个变量中时，我们必须使用data.Technical [x]否则data.Technical.x是正确的。

function loadJson(x) {
dropdown_clear();
var a = document.getElementById(x).text;

document.getElementById("subjTitle").innerHTML=a; 
$.getJSON("data.json", function(data) {
    $.each(data.Technical[x], function (key,value) {
        var $option = $("<option/>").attr("value",value).text(value);
                    $("#dropDownDest").append($option);
        $('#dropDownDest').change(function() {
         var x= $(this).val();
         document.getElementById("topiclabel").innerHTML=x;
        });
    });                         
});

}

如何获取按钮ID并使用它从javascript中的外部文件中获取JSONdata

2 个答案: