11.05.2016, 12:31
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Promise подгрузка контента с .json
Добрый день.
Хочу написать функцию, которая будет подгружать контент с какого-нибудь .json документа (например: http://api.massrelevance.com/reccosx...ed_tweets.json) с помощью promise на чистом JS.
|
|
11.05.2016, 13:39
|
|
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
|
|
11.05.2016, 15:29
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Я так понимаю, что promise не работают на локальной машине из-за отсутствия полифилла. Не подскажете, как его устанавливать? Ввела $ npm install whatwg-fetch --save , и получила ошибку "нет такого файла или дирректории". Перешла в дирректорию, где он распакован, получила ошибку "refusing to install as a dependency of itself".
|
|
11.05.2016, 17:38
|
|
Профессор
|
|
Регистрация: 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.
|
|
11.05.2016, 17:55
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
Спасибо.
|
|
05.06.2016, 23:24
|
Профессор
|
|
Регистрация: 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);
});
|
|
06.06.2016, 12:24
|
Профессор
|
|
Регистрация: 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 указывающую на строку с выводом в консоль.
|
|
06.06.2016, 19:18
|
|
Профессор
|
|
Регистрация: 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);
|
|
06.06.2016, 20:42
|
Профессор
|
|
Регистрация: 21.03.2014
Сообщений: 173
|
|
destus, спасибо. Не спрашивала про fetch(), потому что не получилось с ним, вообще, ничего распарсить (из того же .json-файла), с promise чуть лучше.
|
|
06.06.2016, 23:10
|
Профессор
|
|
Регистрация: 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
Отдельно код работает.
|
|
|
|