Javascript JSON 배열 구문 분석 방법


93

서버에서 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);
 }

내가 도대체 ​​뭘 잘못하고있는 겁니까 ? 감사합니다!


답변:


142

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방법은 오래된 오래된 브라우저에서는 작동하지 않습니다. 따라서 인터넷 연결을 구부리는 일종의 시간을 통해 웹 사이트를 사용할 수 있도록 계획하는 경우 문제가 될 수 있습니다! 그래도 관심이 있으시다면 여기에 지원 차트가 있습니다.


1
브라우저 간 parseJSON 함수를 지원하는 라이브러리를 사용하는 경우이를 사용해야합니다. 또한 루프 실수를 반복합니다.
Bergi

이것을 실행할 때 첫 번째 줄에 오류가 발생합니다. Uncaught SyntaxError : Unexpected token o
nights

@nights : 유효하지 않은 JSON 문자열이있을 가능성이 큽니다. 다음 과 같은
musefan

8

이것이 내 대답입니다.

<!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>

6

for-in-loop에서 실행중인 변수는 속성 값이 아닌 속성 이름을 보유합니다.

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

그러나 카운터는 배열이므로 일반 for 루프를 사용해야합니다.

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

1

서버 데이터와 상호 작용하기위한 "Sencha 방식"은 Ext.data.Storea Ext.data.proxy.Proxy(이 경우 Ext.data.proxy.Ajax)가 제공 하는 프록시 Ext.data.reader.Json(JSON 인코딩 데이터의 경우 다른 판독기도 사용할 수 있음)를 설정하는 것입니다. 서버에 데이터를 다시 쓰는 데에는 Ext.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 구성 요소에 상점을 연결할 수도 있습니다.



0

이것은 매력처럼 작동합니다!

그래서 내 요구 사항에 따라 코드를 편집했습니다. 변경 사항은 다음과 같습니다. 응답의 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);
}

0

득표율이 높은 답변에는 실수가 있습니다. 내가 그것을 사용했을 때 나는 줄 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);
}

1
어쩌면 당신은 의미 깡통을 당신이 말한 곳 해야한다 . 그러나 코드에 더 많은 세부 정보 / 설명을 추가하면 OP 및 동일한 질문을 가진 다른 사람들에게 더 나은 도움이 될 것입니다.
Tiw

이 방법을 선택한 이유에 대해 설명하여 사용자가 더 많이 배울 수 있도록 할 수도 있습니다. 이 답변을 개선하는 데 도움이 될 것입니다.
TsTeaTime

가장 많은 투표를받은 답변이이 질문에 대한 답변을 받았지만 사용했을 때 4 행에서 잘못되었다는 것을 이해했습니다. var counter = jsonData.counters [i]; 하지만 다음과 같이 변경합니다. var counter = jsonData [i] .counters; 그리고 그것은 작동했습니다. 그래서해야하는 대신 할 수 있다고 말했습니다.
Mahdi Jalali

0

머리 위로 ...

var data = JSON.parse(responseBody);

되었습니다 되지 .

우체부 학습 센터는 지금 제안

var jsonData = pm.response.json();

-1

ExtJ에서 데이터 저장소와 프록시를 사용해야합니다. 이에 대한 많은 예가 있으며 JSON 판독기는 JSON 메시지를 사용자가 지정한 모델로 자동으로 구문 분석합니다.

ExtJ를 사용할 때 기본적인 자바 스크립트를 사용할 필요가 없습니다. 모든 것이 다르므로 모든 것을 올바르게하려면 ExtJs 방식을 사용해야합니다. 설명서를주의 깊게 읽으십시오. 좋습니다.

그건 그렇고, 이러한 예제는 ExtJ와 동일한 핵심 기능을 기반으로하는 Sencha Touch (특히 v2)에도 적용됩니다.


-1

내 데이터가 정확히 일치하는지 확실하지 않지만 페이지를 사용할 때 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()+"]")
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.