Promise подгрузка контента с .json
 

Добрый день.
Хочу написать функцию, которая будет подгружать контент с какого-нибудь .json документа (например: http://api.massrelevance.com/reccosx...ed_tweets.json) с помощью promise на чистом JS.

И в чем проблема?
https://learn.javascript.ru/fetch

Я так понимаю, что promise не работают на локальной машине из-за отсутствия полифилла. Не подскажете, как его устанавливать? Ввела $ npm install whatwg-fetch --save , и получила ошибку "нет такого файла или дирректории". Перешла в дирректорию, где он распакован, получила ошибку "refusing to install as a dependency of itself".

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

Спасибо.

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);
});

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 указывающую на строку с выводом в консоль.

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);

destus, спасибо. Не спрашивала про fetch(), потому что не получилось с ним, вообще, ничего распарсить (из того же .json-файла), с promise чуть лучше.

А как лучше обратиться к отдельному файлу? Например, в том .json-файле 200 000+ строк.

let response = JSON.parse('cityList.json'),

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