你會如何將JSON文件導入到JavaScript中？

我有內容的JSON文件你會如何將JSON文件導入到JavaScript中？

{"name" : "Conrad", "info" : "tst", "children" : [ 
    {"name" : "Rick" }, 
    {"name" : "Lynn" }, 
    {"name" : "John", "children": [ 
     {"name" : "Dave", "children": [ 
      {"name" : "Dave" }, 
      {"name" : "Chris" }  
     ]}, 
     {"name" : "Chris" } 
    ]} 
    ]};

我想要導入的JavaScript文件中這個JSON文件數據，並有像

var treeData ={"name" : "Conrad", "info" : "tst", "children" : [ 
     {"name" : "Rick" }, 
     {"name" : "Lynn" }, 
     {"name" : "John", "children": [ 
       {"name" : "Dave", "children": [ 
       {"name" : "Dave" }, 
       {"name" : "Chris" } 

     ] }, 
       {"name" : "Chris" } 
     ]} 
    ]};

最後的結果我已經嘗試了許多代碼樣本，但沒有已經工作了。

來源

2014-01-30 user3248233

對您的JSON文件做一個AJAX請求，然後使用JSON.parse將結果添加到treeData中。

var treeData = JSON.parse(ajaxFunction('jsonfile.php'));

大意的東西......（這將取決於你的AJAX功能）

來源

2014-01-30 07:28:25

解析文件中像這樣的內容：

var treeData = JSON.parse(fileContent);

你沒有描述如何您獲取該文件，但可以使用簡單的XMLHttpRequest將其從服務器上加載。下面是一個有用的資源：從修改鏈接 Using XMLHttpRequest

摘錄：基於下面的評論

var treeData; 

var oReq = new XMLHttpRequest(); 
oReq.onload = reqListener; 
oReq.open("get", "yourFile.txt", true); 
oReq.send(); 

function reqListener(e) { 
    treeData = JSON.parse(this.responseText); 
}

更新：

你不能負載與JSON.parse()的文件。此功能只能將現有的字符串轉換爲對象（如果內容是有效的JSON格式）。

您需要：

負載從服務器上的文件使用例如AJAX（如圖所示）的變量。由於安全原因，您不能使用本地文件路徑。設置本地服務器來運行您的頁面，例如免費的輕量級Mongoose web server。這會讓你將根指向你的本地文件夾，然後使用http://localhost/加載你的頁面
當文件被加載時，你可以將內容傳遞給JSON.parse()函數。上面的例子顯示了整個過程。只需將代碼中的鏈接替換爲實際鏈接即可。

（PS：如果你想要一個jQuery解決方案記得jQuery的標籤來標記您的問題）

來源

2014-01-30 07:28:38 K3N

var treeData = JSON.parse（'C：\ Users \ Bubee \ Desktop \ Paser Tree \ codepen_DjKIa \ test。JSON'）; 它不起作用 – user3248233

@ user3248233你不能使用本地文件，它必須在你的服務器上（與安全有關）。您可以設置一個簡單的本地服務器來測試，如f.ex. [貓鼬（https://code.google.com/p/mongoose/）。這允許你使用你需要的http鏈接（即'http：// localhost /.../test.json'，用一個實際的鏈接替換）。另外，你不能用JSON.parse加載文件。您需要按照答案中所示使用ajax調用來加載文件，然後將結果傳遞給JSON.parse。希望這有助於.- – K3N

約$.getJSON

$.getJSON("yourjsonfile.json", function(data) { 
    console.log("JSON Data: " + data); 
    $.each(data, function(key, val) { 
     console.log(key + "value:: " + val); 
    }); 
});

參考如何：http://api.jquery.com/jquery.getjson/

來源

2014-01-30 07:31:48

我已經使用這個，但它不工作太謝謝你的傢伙 – user3248233

它運作良好，只是一個說明：與K3N的答案，你將不得不有一個本地服務器來運行;-) – MrWashinton

如果有人使用GULP然後這裏是你如何解決：

var gulp = require('gulp'), 
    concat = require('gulp-concat'), 
    insert = require('gulp-insert'); 

gulp.task('jsonConcat', function() { 
    return gulp.src(['path/to/json/your-file.json']) 
    .pipe(insert.prepend('treeData = ')) 
    .pipe(insert.append(';')) 
    .pipe(concat('final-result.js')) 
    .pipe(gulp.dest('path/to/destination/')); 
});

來源

2016-04-13 16:59:44 Syed

你會如何將JSON文件導入到JavaScript中？

回答

相關問題