2012-04-03 58 views
56

Tôi đang sử dụng Sencha Touch (ExtJS) để nhận thông báo JSON từ máy chủ. Tin nhắn tôi nhận được là thông báo này:Javascript cách phân tích cú pháp mảng JSON

{ 
"success": true, 
"counters": [ 
    { 
     "counter_name": "dsd", 
     "counter_type": "sds", 
     "counter_unit": "sds" 
    }, 
    { 
     "counter_name": "gdg", 
     "counter_type": "dfd", 
     "counter_unit": "ds" 
    }, 
    { 
     "counter_name": "sdsData", 
     "counter_type": "sds", 
     "counter_unit": " dd  " 
    }, 
    { 
     "counter_name": "Stoc final", 
     "counter_type": "number ", 
     "counter_unit": "litri  " 
    }, 
    { 
     "counter_name": "Consum GPL", 
     "counter_type": "number ", 
     "counter_unit": "litri  " 
    }, 
    { 
     "counter_name": "sdg", 
     "counter_type": "dfg", 
     "counter_unit": "gfgd" 
    }, 
    { 
     "counter_name": "dfgd", 
     "counter_type": "fgf", 
     "counter_unit": "liggtggggri  " 
    }, 
    { 
     "counter_name": "fgd", 
     "counter_type": "dfg", 
     "counter_unit": "kwfgf  " 
    }, 
    { 
     "counter_name": "dfg", 
     "counter_type": "dfg", 
     "counter_unit": "dg" 
    }, 
    { 
     "counter_name": "gd", 
     "counter_type": "dfg", 
     "counter_unit": "dfg" 
    } 

    ] 
} 

Vấn đề của tôi là tôi không thể phân tích đối tượng JSON này để tôi có thể sử dụng từng đối tượng truy cập.

Tôi đang cố gắng để acomplish đó như thế này:

var jsonData = Ext.util.JSON.decode(myMessage); 
for (var counter in jsonData.counters) { 
    console.log(counter.counter_name); 
} 

am i làm gì sai? Cảm ơn bạn!

+1

Bản sao có thể có của [Biến an toàn chuỗi JSON thành đối tượng] (https://stackoverflow.com/questions/45015/safely-turning-a-json-string-into-an-object) –

Trả lời

88

Javascript đã tích hợp sẵn trong JSON phân tích cú pháp cho các chuỗi, mà tôi nghĩ là những gì bạn có:

var myObject = JSON.parse("my json string"); 

sử dụng điều này với ví dụ của bạn sẽ là:

var jsonData = JSON.parse(myMessage); 
for (var i = 0; i < jsonData.counters.length; i++) { 
    var counter = jsonData.counters[i]; 
    console.log(counter.counter_name); 
} 

Here is a working example

EDIT: Có lỗi trong việc bạn sử dụng vòng lặp (tôi đã bỏ lỡ điều này trong lần đọc đầu tiên của tôi, tín dụng cho @Evert tại chỗ). sử dụng vòng lặp for-in sẽ đặt var là tên thuộc tính của vòng lặp hiện tại, không phải là dữ liệu thực tế. Xem loop cập nhật của tôi ở trên cho đúng cách sử dụng

QUAN TRỌNG: phương pháp JSON.parse sẽ không làm việc trong các trình duyệt cũ cũ - vì vậy nếu bạn có kế hoạch để làm cho trang web của bạn có sẵn thông qua một số loại thời gian uốn kết nối internet, đây có thể là một vấn đề! Nếu bạn thực sự quan tâm, mặc dù, here is a support chart (mà ticks tất cả các hộp của tôi).

+1

Nếu anh ấy sử dụng thư viện hỗ trợ chức năng parseJSON trên nhiều trình duyệt, anh ấy nên sử dụng nó. Ngoài ra, bạn lặp lại lỗi vòng lặp. – Bergi

+0

cảm ơn @musefan. Làm việc như một nét duyên dáng – maephisto

+0

Tôi gặp lỗi trên dòng đầu tiên khi tôi chạy lệnh này: Cú pháp không mong muốn Cú pháp: Mã thông báo không mong muốn o – nights

4

Trong vòng lặp for-in-loop biến chạy giữ tên thuộc tính, không phải giá trị thuộc tính.

for (var counter in jsonData.counters) { 
    console.log(jsonData.counters[counter].counter_name); 
} 

Nhưng như quầy là một mảng, bạn phải sử dụng một bình thường đối với vòng lặp:

for (var i=0; i<jsonData.counters.length; i++) { 
    var counter = jsonData.counters[i]; 
    console.log(counter.counter_name); 
} 
0

Bạn nên sử dụng một kho dữ liệu và proxy trong ExtJs. Có rất nhiều examples điều này và trình đọc JSON tự động phân tích cú pháp thông báo JSON thành mô hình bạn đã chỉ định.

Không cần sử dụng Javascript cơ bản khi sử dụng ExtJ, mọi thứ đều khác nhau, bạn nên sử dụng các cách ExtJ để có mọi thứ đúng. Đọc kỹ tài liệu, nó tốt.

Nhân tiện, các ví dụ này cũng giữ cho Sencha Touch (đặc biệt là v2), dựa trên các chức năng cốt lõi giống như ExtJs.

2

Đây là câu trả lời của tôi,

<!DOCTYPE html> 
<html> 
<body> 
<h2>Create Object from JSON String</h2> 
<p> 
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script> 
var txt = '{"employees":[' + 
'{"firstName":"John","lastName":"Doe" },' + 
'{"firstName":"Anna","lastName":"Smith" },' + 
'{"firstName":"Peter","lastName":"Jones" }]}'; 

//var jsonData = eval ("(" + txt + ")"); 
var jsonData = JSON.parse(txt); 
for (var i = 0; i < jsonData.employees.length; i++) { 
    var counter = jsonData.employees[i]; 
    //console.log(counter.counter_name); 
    alert(counter.firstName); 
} 

</script> 
</body> 
</html> 
+2

Tham khảo W3 trường học cho ví dụ trên. http://www.w3schools.com/json/json_syntax.asp –

1

"Sencha cách" để tương tác với dữ liệu máy chủ được thiết lập một Ext.data.Store đại diện bởi một Ext.data.proxy.Proxy (trong trường hợp này Ext.data.proxy.Ajax) trang bị với một Ext.data.reader.Json (đối với dữ liệu JSON-mã hóa, có những độc giả khác có sẵn cũng). Để ghi dữ liệu trở lại máy chủ, có một số loại Ext.data.writer.Writer.

Dưới đây là một ví dụ về một thiết lập như thế:

var store = Ext.create('Ext.data.Store', { 
     fields: [ 
      'counter_name', 
      'counter_type', 
      'counter_unit' 
     ], 

     proxy: { 
      type: 'ajax', 
      url: 'data1.json', 

      reader: { 
       type: 'json', 
       idProperty: 'counter_name', 
       rootProperty: 'counters' 
      } 
     } 
    }); 

data1.json trong ví dụ này (cũng có sẵn trong this fiddle) chứa dữ liệu của bạn đúng nguyên văn. idProperty: 'counter_name' có thể là tùy chọn trong trường hợp này nhưng thường trỏ vào thuộc tính khóa chính. rootProperty: 'counters' chỉ định thuộc tính nào chứa mảng các mục dữ liệu.

Với thiết lập cửa hàng theo cách này, bạn có thể đọc lại dữ liệu từ máy chủ bằng cách gọi store.load(). Bạn cũng có thể kết nối cửa hàng với bất kỳ thành phần giao diện người dùng thích hợp nào của Sencha Touch như lưới, danh sách hoặc biểu mẫu.

Các vấn đề liên quan