Получить простой текст JSON, вставить в JavaScript

Question

У меня есть URL http://myapp.com/get_data, который возвращает application/json Content-Type.Когда я перехожу по этому URL-адресу, я получаю текстовый массив JSON в окне моего браузера

[[key, value],
 [key, value],
 [key, value],
 ...]

У меня также есть функция JavaScript, которая ожидает данные в формате массива JSON

function process_data() {
  var data = // give me more data in JSON array format...
}

Как мне сделать, чтобы мой JavaScript просматривал http://myapp.com/get_data и назначил результирующий массив JSON в переменную data внутри process_data()?

Я новичок в JavaScript (происходит из фона Python) и я был бы признателен, если бы вы могли предложить решения, использующие основную библиотеку JavaScript.Также приветствуются решения, использующие другие библиотеки, предпочтительно те, которые считаются лучшими.

ОБНОВЛЕНИЕ

Похоже, я не совсем понял свой вопрос.Позвольте мне привести пример из Python.После выполнения необходимого импорта я могу сделать что-то вроде

url = "http://myapp.com/get_data"
page = urllib2.urlopen(url)
page_source = page.read()

На этот раз page_source уже является объектом Python str, с которым я могу легко играть, присваивать другим переменным и т. Д. Если ямог бы смешать Python и JavaScript вместе, для контекста этого вопроса я хотел бы сделать что-то вроде

function process_data() {
  url = "http://myapp.com/get_data"
  page = urllib2.urlopen(url)
  page_source = page.read()
  var data = convert_str_to_JSON(page_source)
}

Конечно, это была просто уродливая путаница кода, но я надеюсь, что он передает то, что япытаясь получить по адресу:

1. JavaScript будет GET URL.
2. Чтение источника.
3. Интерпретация источника как JSON.
4. Назначениеэто к переменной.

Answer 1

Более новый браузер поддерживает синтаксический анализ JSON.

Можно сказать JSON.parse('json data').Для более старых браузеров (таких как IE 7 или 6) вы можете использовать эту библиотеку: https://github.com/douglascrockford/JSON-js

Использовать json2.js из библиотеки выше.Он проверяет, присутствует ли собственная реализация браузера, если нет, добавляет его.

Не используйте eval (поскольку eval это зло )!

Обновление: Чтобы получить 'данные json', используйте это:

var jsonObject = {}; 
var xhr = new XMLHttpRequest();
xhr.open( "GET", url, true );      // true makes this call asynchronous
xhr.onreadystatechange = function () {    // need eventhandler since our call is async
     if ( xhr.readyState == 4 && xhr.status == 200 ) {  // check for success
        jsonObject = JSON.parse( xhr.responseText );
     }
};
xhr.send(null);

Кроме того, я бы предложил прочитать эту статью для кросс-браузерных проблем и реализации XMLHttpRequest объекта.

Answer 2

Если вы используете библиотеку jQuery, вы можете использовать библиотеку jquery-jsonp code.google.com jquery-jsonp

function getProfile(userId) {

$.jsonp({
  "url": "http://gdata.youtube.com/feeds/api/users/"+userId+"?callback=?",
  "data": {
      "alt": "json-in-script"
  },
  "success": function(userProfile) {
      // userProfile - is JSON data with which you can work
      // handle user profile here 
  },
  "error": function(d,msg) {
      alert("Could not find user "+userId);
  }
}); }

Также на странице "http://myapp.com/get_data"необходимо поместить данные JSON в данные обратного вызова

callback(json_data_here)

Answer 3

Есть несколько способов. Если вы используете какую-то библиотеку, большинство из них имеют встроенные методы JSON.parse (). В более новых браузерах (например, Chrome, Firefox, Safari и т. Д.) Эта возможность встроена.

Еще один способ сделать это с помощью обратного вызова jsonp. С помощью этого метода вы определяете функцию в своем скрипте, а затем записываете тег скрипта на страницу, загружая URL, который вы хотите загрузить в качестве источника. Вы передаете имя своей функции в качестве параметра на удаленный URI, и ваш сервер оборачивает ответ json обратным вызовом. Когда она загружается на страницу, ваша функция выполняется с использованием данных, которые она упаковывает как объект javascript.

Это простой пример:

var your_callback = function(obj){
    console.log(obj);
}

<script src="http://myapp.com/get_data/?callback=your_callback"></script>

В этот момент выполняется your_callback, а переменная "obj" содержит ваши данные.

Опять же, если у вас есть преимущество использования библиотеки javascript, эта функциональность уже может быть включена. JQuery делает этот бит действительно простым.

JSONP обычно используется для междоменной передачи данных, но он также работает локально. Если вы делаете это локально, вам не нужно использовать JSONP, и вместо этого вы можете использовать XHR-запросы.

Answer 4

Использование JQuery в наше время почти стандартно:

$.get('/get_data', function (data) {
   //success callback

}, 'json');

Я сделал скрипку здесь, посмотрите образец здесь: http://jsfiddle.net/b24GZ/ - выборка данных JSON из: http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo

Рекомендации:

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

http://api.jquery.com/jQuery.parseJSON/