Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.05.2016, 12:31
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

Promise подгрузка контента с .json
Добрый день.
Хочу написать функцию, которая будет подгружать контент с какого-нибудь .json документа (например: http://api.massrelevance.com/reccosx...ed_tweets.json) с помощью promise на чистом JS.
Ответить с цитированием
  #2 (permalink)  
Старый 11.05.2016, 13:39
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

И в чем проблема?
https://learn.javascript.ru/fetch
Ответить с цитированием
  #3 (permalink)  
Старый 11.05.2016, 15:29
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

Я так понимаю, что promise не работают на локальной машине из-за отсутствия полифилла. Не подскажете, как его устанавливать? Ввела $ npm install whatwg-fetch --save , и получила ошибку "нет такого файла или дирректории". Перешла в дирректорию, где он распакован, получила ошибку "refusing to install as a dependency of itself".
Ответить с цитированием
  #4 (permalink)  
Старый 11.05.2016, 17:38
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Blondinka,
Создаете директорию, открываете в консоли пишите npm init (или вручную создаете package.json), далее npm install whatwg-fetch --save. Используете модуль для сборки Browserify или поднимаете Webpack на сервере, используете CommonJS или прикручиваете babel, если интересны ES2015 модули. Про модульность в JavaScript написано тут

Последний раз редактировалось destus, 11.05.2016 в 17:41.
Ответить с цитированием
  #5 (permalink)  
Старый 11.05.2016, 17:55
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

Спасибо.
Ответить с цитированием
  #6 (permalink)  
Старый 05.06.2016, 23:24
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

promise работает; могу получить данные .json. Проблема в том, что не могу:
1) Добраться к конкретным значениям. Например, получить id и город.
console.log(response.indexOf("Hurzuf")); //Result -> 22

А хочется получить индекс объекта, а не первого символа слова.
2) Не могу получить значения (например: name), зная их адрес. Пыталась ->>
console.log(response[0][0]);

но ничего не получается.
3)У .json-файла что-то не так с кодировкой. Пыталась поменять её в .txt, но особых изменений не произошло. Возможно, из-за этого что-то не работает. Браузер выдаёт ошибку: "not well-formed". Пример:
{"_id":707860,"name":"Hurzuf","country":"UA","coord":{"lon":34.283333,"lat":44.549999}}
{"_id":519188,"name":"Novinki","country":"RU","coord":{"lon":37.666668,"lat":55.683334}}
{"_id":1283378,"name":"Gorkhā","country":"NP","coord":{"lon":84.633331,"lat":28}}
{"_id":1270260,"name":"State of Haryāna","country":"IN","coord":{"lon":76,"lat":29}}
{"_id":708546,"name":"Holubynka","country":"UA","coord":{"lon":33.900002,"lat":44.599998}}
{"_id":1283710,"name":"Bāgmatī Zone","country":"NP","coord":{"lon":85.416664,"lat":28}}
{"_id":529334,"name":"Mar’ina Roshcha","country":"RU","coord":{"lon":37.611111,"lat":55.796391}}

Остальной код
function get(url) {
  return new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      if (req.status == 200) {
        resolve(req.response);
      }
      else {
        reject(Error(req.statusText));
      }
    };
    req.onerror = function() {
      reject(Error("Сетевая ошибка"));
    };
    req.send();
  });
}

get('cityList.json').then(function(response) {
  console.log(response); //All .json-file content
  console.log(response.indexOf("Hurzuf")); //Result -> 22
}, function(error) {
  console.error("Не удалось выполнить!", error);
});
Ответить с цитированием
  #7 (permalink)  
Старый 06.06.2016, 12:24
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

console.log("Name [0] "+response[0]["name"]); //undefined
console.log(response.indexOf("Hurzuf")); //Result -> 22

Добавила [] и запятые в .json
[{"_id":707860,"name":"Hurzuf","country":"UA","coord":{"lon":34.283333,"lat":44.549999}},
{"_id":519188,"name":"Novinki","country":"RU","coord":{"lon":37.666668,"lat":55.683334}},
{"_id":1283378,"name":"Gorkhā","country":"NP","coord":{"lon":84.633331,"lat":28}}]

---> syntax error cityList.json:1:1
Если убрать [], то ошибка меняется на not well-formed cityList.json:1:1
Получается, что валидный и невалидный .json одинаково плохо парсится. И тот и другой выдаёт весь результат, но отдельные данные получить не получается.
Если добавить
req.responseType = 'json';
, то ничего не парсится и выдаёт ошибку
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
или Type Error указывающую на строку с выводом в консоль.
Ответить с цитированием
  #8 (permalink)  
Старый 06.06.2016, 19:18
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Blondinka,
Почему не использовали fetch, а просто написали обёртку для асинхронного функционала? Ведь fetch как раз и возвращает промис.

Вот вам ES6 код, для поиска нужного индекса в массиве response. На вход подаётся искомое Name.

let response = JSON.parse('[{"id":707860,"name":"Hurzuf","country":"UA","coord":{"lon":34.283333,"lat":44.549999}},{"_id":519188,"name":"Novinki","country":"RU","coord":{"lon":37.666668,"lat":55.683334}},{"_id":1283378,"name":"Gorkhā","country":"NP","coord":{"lon":84.633331,"lat":28}},{"_id":1270260,"name":"State of Haryāna","country":"IN","coord":{"lon":76,"lat":29}},{"_id":708546,"name":"Holubynka","country":"UA","coord":{"lon":33.900002,"lat":44.599998}},{"_id":1283710,"name":"Bāgmatī Zone","country":"NP","coord":{"lon":85.416664,"lat":28}},{"_id":529334,"name":"Mar’ina Roshcha","country":"RU","coord":{"lon":37.611111,"lat":55.796391}}]'),
        findName = 'Hurzuf',
        idx = response.findIndex(obj => Object.is(obj.name, findName));

    alert(idx);
Ответить с цитированием
  #9 (permalink)  
Старый 06.06.2016, 20:42
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

destus, спасибо. Не спрашивала про fetch(), потому что не получилось с ним, вообще, ничего распарсить (из того же .json-файла), с promise чуть лучше.
Ответить с цитированием
  #10 (permalink)  
Старый 06.06.2016, 23:10
Профессор
Отправить личное сообщение для Blondinka Посмотреть профиль Найти все сообщения от Blondinka
 
Регистрация: 21.03.2014
Сообщений: 173

А как лучше обратиться к отдельному файлу? Например, в том .json-файле 200 000+ строк.
let response = JSON.parse('cityList.json'),

--> SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Отдельно код работает.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгруздка внешнего контента в блок и снова подгрузка arahmanov Элементы интерфейса 2 19.01.2014 14:31
Динамическая подгрузка контента при прокрутке assd18 AJAX и COMET 11 14.03.2013 14:05
Подгрузка контента в div Platypus Общие вопросы Javascript 10 09.03.2013 12:27
Подгрузка контента, без перезагрузки панели cyber_bober Элементы интерфейса 2 14.12.2012 13:37
Подгрузка контента Контакта beerdy AJAX и COMET 5 25.10.2011 10:24