Угловое 2 JSON Синтаксический не работает

Я использую Http.get для получения информации с помощью формата JSON с помощью углового 2.Угловое 2 JSON Синтаксический не работает

Вот сервис я использую, чтобы получить данные в формате JSON, который работает:

getProd() { 
    return this._http.get('https://restcountries.eu/rest/v1/capital/tallinn') 
     .map(res => res.json()); 
}

Тогда в компоненте конструктора Я использую:

this._etsyService.getProd().subscribe(product => { 
     this.product = product; 
    });

Затем в шаблоне вида, если указать:

{{ product | json }}

я получаю в браузере сырой JSon распечатку:

[ { "name": "Estonia", "topLevelDomain": [ ".ee" ], "alpha2Code": "EE", "alpha3Code": "EST", "callingCodes": [ "372" ], "capital": "Tallinn",

Однако, если я пытаюсь изменить {{продукт, чтобы {{product.name}}, например (с и без трубы | json в конце, я получаю сообщение об ошибке, что он не может прочитать свойство 'name' undefined?

Я новичок в Angular, и я уверен, что это всего лишь проблема синтаксического анализа, с которой я сталкиваюсь. Я пробовал массу комбинаций.

Помощь?

источник

2016-10-10 Gary Simon

Когда шаблон визуализации, 'product.name' не определено. Вы используете pipe '| json', чтобы преобразовать его в формат 'JSON', если он не поднимет вашу ошибку. Просто используйте pipe '| json' или place '* ngIf =" product "' решат проблему – eugene

Ваш JSON не единственный объект, это массив.

В компоненте

this._etsyService.getProd().subscribe(product => { 
     this.product = product[0]; 
    });

И в шаблоне

{{ product.name }}

источник

2016-10-10 05:22:28 Sefa

Да, спасибо, это была проблема с этим конкретным json. У меня аналогичная проблема с другим API, который возвращает json вот так: {"response": {"version": "0.1", "termsofService": "http://www.wunderground.com/weather/api/ d/terms.html "," features ": {" conditions ": 1}}," current_observation ": {" image ": {" url ":" http://icons.wxug.com/graphics/wu2/logo_130x80 .png "," title ":" Weather Underground " Если я пытаюсь указать {{product.title}}, ничего не отображается. Наверное, у меня просто недостаточно опыта анализа json-данных, поэтому я сталкиваюсь с этими проблемами. –

Я считаю, что это не все из json. Если вы можете отредактировать вопрос и добавить новый json в качестве обновления, я могу четко рассмотреть. – Sefa

Ну ладно, я понял это сейчас. this.product = product ['current_observation'] ['image']; работает. В этом случае в функции .subscribe мне пришлось бы добавить несколько переменных, таких как this.product, this.otherinfo, this.etc .., чтобы получить доступ к различным частям этого json-возврата. Мне просто интересно, есть ли способ сделать это в представлении. –

Для этого можно использовать оператор ?. всякий раз, когда вы имеете дело с асинхронным вызовом, как показано ниже,

{{product?.name})

источник

2016-10-10 04:32:00 micronyks

Как уже упоминалось в @cuongngo комментарий, *ngIf="product" на родительском контейнере является относительно легко исправить.

Что-то, как это должно работать ...

{{ (product | async).name }}

источник

2016-10-10 04:32:19 Rob

Угловое 2 JSON Синтаксический не работает

ответ

Смежные вопросы