如何從JSON文件

獲取數據我有一個JSON數據和代碼一個div。我想獲得連接從JSON文件數據到人更新容器股利。我嘗試了下面的代碼。但那不起作用。請幫我從JSON文件中獲取來自連接的數據。 JSON數據和人更新容器文件都在同一個HTML頁面。謝謝。如何從JSON文件

var feed_json = [{   
 
\t \t    
 
     'teams' : [    {"total_count": '32'}, 
 
        "count" : "10", 
 
                      "url"       : "" 
 
                    }, 
 
                    { "id" : "id2", 
 
                      "name" : "Group 2", 
 
                      "count" : "55", 
 
                      "url"       : "" 
 
        }         
 
     
 
     ], 
 
     
 
     'connections': [  {'total_count' : '110'}, 
 
                     
 
\t                    { "id" : "id1", 
 
\t                       "name" : "Gossip Gang", 
 
\t                       "count" : "20", 
 
\t                       "url"       : "" 
 
\t                    }, 
 
\t                    { "id" : "id2", 
 
\t                       "name" : "JEC Folks", 
 
\t                       "count" : "90", 
 
\t                       "url"       : "" 
 
\t                    }                     
 
\t                 ] 
 
                 
 
}]; 
 

 

 

 
var feedConnections = feed_json.connections; 
 

 
\t \t for(var i = 0; i < feedConnections.length; i++) { 
 
\t \t \t var connection = feedConnections[i]; 
 

 
\t \t \t var id = connection.id; 
 
\t \t \t var name = connection.name; 
 
\t \t \t var count = connection.count; 
 

 
\t \t \t var connectionFeed = $('<div><div id = '+ id +' style = "margin-top: 10px;"> <span class="expandIcon1" style="float: right;"> <img width="28" height="28" src="/media/images/icons/arrow-Down-lines.png"/> </span> <span class="barTitle">'+ name + '<span> (' + count + ')</span></span></div></div>'); 
 

 
\t \t \t $('.people-update-container').append(connectionFeed); 
 
\t \t }

<div class = "people-update-container" style = "display: none;"> 
 

 
</div>

來源

2016-08-17 Melbin Mathai

刪除「[]」在你的JSON字符串 – Max

不知道我是注意到只有一個，但你必須在你的團隊屬性無效JSON數據。 – ThatAwesomeCoder

您的JSON無效。 –

這將工作。通過添加jquery cdn路徑解決jquery錯誤問題出在你的json數據上，它有一些錯誤。

var feed_json = { 
 
"teams": [{ 
 
\t \t "total_count": "32", 
 
\t \t "count": "10", 
 
\t \t "url": "" 
 
\t }, { 
 
\t \t "id": "id2", 
 
\t \t "name": "Group 2", 
 
\t \t "count": "55", 
 
\t \t "url": "" 
 
\t } 
 

 
], 
 

 
"connections": [{ 
 
\t \t "total_count": "110" 
 
\t }, 
 

 
\t { 
 
\t \t "id": "id1", 
 
\t \t "name": "Gossip Gang", 
 
\t \t "count": "20", 
 
\t \t "url": "" 
 
\t }, { 
 
\t \t "id": "id2", 
 
\t \t "name": "JEC Folks", 
 
\t \t "count": "90", 
 
\t \t "url": "" 
 
\t } 
 
] 
 

 
}; 
 

 

 
var feedConnections = feed_json.connections; 
 

 
\t \t for(var i = 0; i < feedConnections.length; i++) { 
 
\t \t \t var connection = feedConnections[i]; 
 

 
\t \t \t var id = connection.id; 
 
\t \t \t var name = connection.name; 
 
\t \t \t var count = connection.count; 
 

 
\t \t \t //var connectionFeed = $('<div><div id = '+ id +' style = "margin-top: 10px;"> <span class="expandIcon1" style="float: right;"> <img width="28" height="28" src="/media/images/icons/arrow-Down-lines.png"/> </span> <span class="barTitle">'+ name + '<span> (' + count + ')</span></span></div></div>'); 
 

 
\t \t // \t $('.people-update-container').append(connectionFeed); 
 
alert(name); 
 
\t \t }

<div class = "people-update-container" style = "display: none;"> 
 

 
</div>

來源

2016-08-17 07:42:45

我有一個疑問，當它嘗試運行時，在警報中顯示「未定義」的東西。在我的項目中，它也顯示爲一個單獨的div？請你解釋一下爲什麼？ –

{ \t \t 「TOTAL_COUNT」：「32」， \t \t 「計數」：「10」， \t \t 「URL」：「」 \t}這是您的JSON數組的第一個元素。它沒有「名稱」參數。所有其他元素都有名稱參數。這就是爲什麼它不可取的原因。 –

var connections = connections[0] /* !!! */ 
for (var key in connections) { // You're not iterating an array, but the object inside! 

      var id = connections[key].id; 
      var name = connections[key].name; 
      var count = connections[key].count; 

}

來源

2016-08-17 06:45:12

OST瀏覽器支持JSON.parse（）來，其在ECMA-262第5版（即JS是基於本說明書中）所定義。它的用法很簡單：

var json = '{"result":true,"count":1}', 
    obj = JSON.parse(json); 

alert(obj.count);

對於那些不能使用json2.js實現的瀏覽器。

正如在評論中指出，如果你已經使用jQuery，有一個$ .parseJSON功能（如果可用）或EVAL的舊版瀏覽器形式映射到JSON.parse。然而，這是執行也可以通過JSON.parse進行額外的，不必要的檢查，所以最佳的全面表現，我建議使用它，像這樣：

var json = '{"result":true,"count":1}', 
    obj = JSON && JSON.parse(json) || $.parseJSON(json);

這將確保您立即使用本機JSON.parse ，而不是讓jQuery在將字符串傳遞給本地解析函數之前對其進行完整性檢查。

本規範從這個link

來源

2016-08-17 06:53:40

導入了JSON是無效的。嘗試驗證json使用jsonlint.com 這是有效的。

{ 
"teams": [{ 
     "total_count": "32", 
     "count": "10", 
     "url": "" 
    }, { 
     "id": "id2", 
     "name": "Group 2", 
     "count": "55", 
     "url": "" 
    } 

], 

"connections": [{ 
     "total_count": "110" 
    }, 

    { 
     "id": "id1", 
     "name": "Gossip Gang", 
     "count": "20", 
     "url": "" 
    }, { 
     "id": "id2", 
     "name": "JEC Folks", 
     "count": "90", 
     "url": "" 
    } 
] 

}

來源

2016-08-17 07:37:01

您可以通過XHR請求獲取JSON數據：

var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     var json_data = JSON.parse(xhttp.responseText); 
     var connections = json_data.connections; 

     /* Do something with the data */ 
    } 
}; 
xhttp.open("GET", "/path/to/json/file.json", true); 
xhttp.send();

但在此之前，你必須格式化數據是正確的JSON，像這樣：

{ 
    teams: [ ... ], 
    connections: [ ... ] 
}

閱讀關於JSON here。

來源

2016-08-17 07:50:26

如何從JSON文件

回答

相關問題