Javascript как разобрать массив JSON


93

Я использую Sencha Touch (ExtJS), чтобы получить сообщение 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"
    }

    ]
}

Моя проблема в том, что я не могу разобрать этот объект 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 есть ошибка (я пропустил это при первом чтении, спасибо @Evert за место). использование цикла for-in установит переменную как имя свойства текущего цикла, а не фактические данные. См. Мой обновленный цикл выше для правильного использования

ВАЖНЫЙ : этот JSON.parseметод не будет работать в старых старых браузерах - поэтому, если вы планируете сделать свой веб-сайт доступным через какое-то время, искажающее интернет-соединение, это может быть проблемой! Если вам действительно интересно, вот диаграмма поддержки (которая отмечает все мои поля).


1
Если он использует библиотеку, которая поддерживает кроссбраузерную функцию parseJSON, он должен ее использовать. Кроме того, вы повторяете ошибку цикла.
Берги

Я получаю сообщение об ошибке в первой строке , когда я запускаю это: Uncaught SyntaxError: Неожиданный токен O
ночи

@nights: Скорее всего, у вас неправильная строка JSON, тогда попробуйте онлайн-инструмент проверки 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.Storeпрокси- сервера 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, таким как сетки, списки или формы.



0

Это работает как шарм!

Поэтому я отредактировал код в соответствии со своими требованиями. И вот изменения: он сохранит номер идентификатора из ответа в переменную среды.

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; и это сработало. поэтому я сказал, может, а не должен.
Махди Джалали


-1

Вы должны использовать хранилище данных и прокси в ExtJ. Существует множество примеров этого, и программа чтения JSON автоматически анализирует сообщение JSON в указанной вами модели.

Нет необходимости использовать базовый Javascript при использовании ExtJ, все по-другому, вы должны использовать способы ExtJ, чтобы все сделать правильно. Прочтите внимательно документацию, это хорошо.

Кстати, эти примеры также относятся к Sencha Touch (особенно v2), которая основана на тех же основных функциях, что и ExtJs.


-1

Не уверен, что мои данные точно совпадают, но у меня был массив массивов объектов JSON, которые были экспортированы из jQuery FormBuilder при использовании страниц.

Надеюсь, мой ответ поможет любому, кто наткнется на этот вопрос в поисках ответа на проблему, аналогичную моей.

Данные выглядели примерно так:

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()+"]")
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.