Javascript JSON 배열 구문 분석 방법
서버에서 JSON 메시지를 받기 위해 Sencha Touch (ExtJS)를 사용하고 있습니다. 내가받는 메시지는 다음과 가변적이다.
{
"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"
}
]
}
내 문제는 JSON 개체를 구문 분석하여 각 카운터 개체를 사용할 수 있습니다.
나는 다음과 같이 그것을 시도하고 있습니다.
var jsonData = Ext.util.JSON.decode(myMessage);
for (var counter in jsonData.counters) {
console.log(counter.counter_name);
}
내가 도대체 뭘 잘못하고있는 겁니까? 감사합니다!
Javascript에는 여기에 대한 JSON 구문 분석이 내장되어 있습니다.
var myObject = JSON.parse("my json string");
이것을 사용하는 것입니다.
var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
var counter = jsonData.counters[i];
console.log(counter.counter_name);
}
편집 : for 루프를 사용하는 데 실수가 있습니다 놓칠 수 있습니다. for-in 루프를 사용하면 var가 실제 데이터가 아닌 현재 루프의 속성 이름으로 설정됩니다. 올바른 사용법은 위의 업데이트 된 루프를 참조하십시오.
중요 : JSON.parse오래된 오래된 브라우저에서는 작동하지 않습니다. 따라서 인터넷 연결을 통해 웹 사이트를 사용하기 위해 사용할 수있는 경우에는 구부리는 사용 시간을 사용할 수 있습니다! 그래도 관심이 있으시면 여기에 지원 차트가 있습니다 (모든 상자에 표시됨).
for-in-loop에서 실행중인 변수는 속성 값이 아닌 속성 이름을 보유합니다.
for (var counter in jsonData.counters) {
console.log(jsonData.counters[counter].counter_name);
}
그러나 카운터는 일반적으로 루프를 배열합니다.
for (var i=0; i<jsonData.counters.length; i++) {
var counter = jsonData.counters[i];
console.log(counter.counter_name);
}
이것이 내 대답입니다.
<!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>
서버 데이터와 상호 작용하기위한 "센차 방식"은 (이 경우 ) 제공가 하는 프록시 (JSON 인코딩 데이터의 경우 다른 판독기도 사용할 수 있음 )를 설정하는 것입니다. 서버에 데이터를 다시 쓰는 데에는 여러 종류가 있습니다.Ext.data.StoreExt.data.proxy.ProxyExt.data.proxy.AjaxExt.data.reader.JsonExt.data.writer.Writer
다음은 이와 같은 설정의 예입니다.
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이 예제 ( 이 바이올린 에서도 사용 가능 )에는 데이터가 그대로 포함되어 있습니다. idProperty: 'counter_name'이 경우 선택 사항 일 수 있지만 일반적으로 기본 키 속성을 가리 킵니다. rootProperty: 'counters'데이터 항목의 배열을 포함하는 속성을 지정합니다.
이 방법으로 저장소 설정을 사용하면을 호출하여 서버에서 데이터를 다시 읽을 수 있습니다 store.load(). 그리드, 목록 또는 양식과 같은 Sencha Touch 적절한 UI 구성 요소에 상점을 연결할 수도 있습니다.
좀 더 요점을 ..
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);
document.write(contact.phone[1]);
// Output:
// Aaberg, Jesper
// 555-0100
참조 : https://docs.microsoft.com/en-us/scripting/javascript/reference/json-parse-function-javascript
이것은 매력처럼 작동합니다!
그래서 내 요구 사항에 따라 코드를 편집했습니다. 변경 사항은 다음과 같습니다. 응답의 ID 번호를 환경 변수에 저장합니다.
var jsonData = JSON.parse(responseBody);
for (var i = 0; i < jsonData.data.length; i++)
{
var counter = jsonData.data[i];
postman.setEnvironmentVariable("schID", counter.id);
}
ExtJ에서 데이터 저장소와 프록시를 사용해야합니다. 이에 대한 많은 예가 있으며 JSON 판독기는 JSON 메시지를 사용자가 지정한 모델로 자동으로 구문 분석합니다.
ExtJ를 사용할 때 기본적인 자바 스크립트를 사용할 필요가 없습니다. 모든 것이 다르므로 모든 것을 올바르게하려면 ExtJs 방식을 사용해야합니다. 설명서를주의 깊게 읽으십시오. 좋습니다.
그건 그렇고, 이러한 예제는 ExtJ와 동일한 핵심 기능을 기반으로하는 Sencha Touch (특히 v2)에도 적용됩니다.
내 데이터가 정확히 일치하는지 확실하지 않지만 페이지를 사용할 때 jQuery FormBuilder에서 내 보낸 JSON 객체 배열이 있습니다.
내 대답이 내가 가진 것과 비슷한 문제에 대한 대답을 찾는이 질문에 우연히 발견 된 모든 사람에게 도움이되기를 바랍니다.
데이터는 다음과 같습니다.
var allData =
[
[
{
"type":"text",
"label":"Text Field"
},
{
"type":"text",
"label":"Text Field"
}
],
[
{
"type":"text",
"label":"Text Field"
},
{
"type":"text",
"label":"Text Field"
}
]
]
이것을 파싱하기 위해 내가 한 일은 단순히 다음을 수행하는 것입니다.
JSON.parse("["+allData.toString()+"]")
득표율이 높은 답변에는 실수가 있습니다. 내가 그것을 사용했을 때 나는 줄 3에서 그것을 발견합니다.
var counter = jsonData.counters[i];
나는 그것을 다음과 같이 변경했다.
var counter = jsonData[i].counters;
그리고 그것은 나를 위해 일했습니다. 3 행의 다른 답변과 차이가 있습니다.
var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
var counter = jsonData[i].counters;
console.log(counter.counter_name);
}
참고 URL : https://stackoverflow.com/questions/9991805/javascript-how-to-parse-json-array
'ProgramingTip' 카테고리의 다른 글
| 변경된 각 행에서 변경된 행 및 변경된 바이트 강조 표시 (0) | 2020.10.12 |
|---|---|
| "기본"크기의 50 %로 이미지 표시 (0) | 2020.10.12 |
| PIL을 사용하여 픽셀의 RGB 제공 (0) | 2020.10.12 |
| C #의 memset에 해당하는 것은 무엇입니까? (0) | 2020.10.11 |
| HTML : 텍스트에서 특정 단어의 색상 변경 (0) | 2020.10.11 |