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.