Конвертировать источник данных в файл json в файл jQuery

Question

Может кто-нибудь помочь мне преобразовать данные json из файла js в файл json,

Я пытаюсь включить данные в файл js, чтобы файл js считал их из файла json.

java.js

var serverName = {
    "App1": ["Server1", "Server2", "Server3"],
    "App2": ["ServerA", "ServerB", "ServerC"],
    "App3": ["ServerX", "ServerY", "ServerZ"]
}

    function changecat(value) {
        if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in serverName[value]) {
                catOptions += "<option>" + serverName[value][categoryId] + "</option>";
            }
            document.getElementById("category").innerHTML = catOptions;
        }
    }

java.html

 <script type="text/javascript" src="java.js"></script>

    <select name="targetApp" id="targetApp" onChange="changecat(this.value);">
        <option value="" disabled selected>Select</option>
        <option value="App1">App</option>
        <option value="App">App</option>
        <option value="App">App</option>
    </select>
    <select name="category" id="category">
     <option value="" disabled selected>Select</option>
    </select>

создан новый файл данных

data.json

{
    "App1": ["Server1", "Server2", "Server3"],
    "App2": ["ServerA", "ServerB", "ServerC"],
    "App3": ["ServerX", "ServerY", "ServerZ"]
}

Я попробовал эти методы, но ни один из них не работает.

не будет работать, я получаю serverName неопределенным по какой-то причине jQuery не может установить serverName в глобальную переменную.

var serverName;

function jsonData(){
        $.getJSON("data.json", function(data) {

var serverName = data;

});
}


 function changecat(value) {
        if (value.length == 0) document.getElementById("category").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (categoryId in serverName[value]) {
                catOptions += "<option>" + serverName[value][categoryId] + "</option>";
            }
            document.getElementById("category").innerHTML = catOptions;
        }
    }

также этот не делаетДля работы serverName будет прочитано в java.js (внутри функции), поэтому HTML не сможет его прочитать, serverName не будет определено на стороне HTML.

$.getJSON("data.json", function(data) {

var serverName = data;

function changecat(value) {
        if (value.length === 0) document.getElementById("host").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (hostId in serverName[value]) {
                catOptions += "<option>" + serverName[value][hostId] + "</option>";
            }
            document.getElementById("host").innerHTML = catOptions;
        }
    }

});

любая помощь приветствуется

Спасибо

Answer 1

исправлено следующим образом ..

java.js

var serverName = $.getJSON('data.json',function(data){
serverName = data;
});

function changecat(value) {
        if (value.length === 0) document.getElementById("host").innerHTML = "<option></option>";
        else {
            var catOptions = "";
            for (hostId in serverName[value]) {
                catOptions += "<option>" + serverName[value][hostId] + "</option>";
            }
            document.getElementById("host").innerHTML = catOptions;
        }
    }