Реагировать JS - Как передать переменные (параметры) в URL API? - PullRequest
Новая
       9

Реагировать JS - Как передать переменные (параметры) в URL API?

0 голосов
/ 19 мая 2018

У меня есть одна страница, состоящая из двух компонентов раскрывающегося списка;Страница доступна только после успешной аутентификации (действительный токен).Оба раскрывающихся списка используют данные из разных JSON-API.У меня есть один из раскрывающихся списков, но для другого URL-адрес его API требует параметров.

Пример URL-адреса : http://buildingsAPI:111/api/buildings/

провереночерез почтальона с добавленным идентификатором : http://buildingsAPI:111/api/buildings/abcde-abce-abc2-111-2222

пример Json: 

[
    {
        "abc_buildingid": "1111-2222-3333-aaa-1111117",
        "abc_energyprogramid": "abcde-abce-abc2-111-2222",
        "siteName": "Building 1",
        "Available": false,
        "clientName": "Client 1"
    },
    {
        "abc_buildingid": "222-2222-3333-aaa-1111117",
        "abc_energyprogramid": "xyz11-abce-abc2-111-2222",
        "siteName": "Building 2",
        "Available": false,
        "clientName": "Client 2"
    },
]

... уже получаю токен при аутентификации пользователя (localStorage), но мне также нужнодобавить / передать abc_energyprogramid в качестве параметра к URL-адресу API.

... код : 

     constructor(props) {
      super(props);

      this.getToken = this.getToken.bind(this);
    }


componentDidMount() {
    const bearerToken = this.getToken();

    fetch('http://buildingsAPI:111/api/buildings/?myparam1={abc_energyprogramid}', {
     method: 'GET',
     headers: {
                'Content-type': 'application/json',
                'Authorization': `Bearer ${bearerToken}`
              },
        })
        .then(results => results.json())
        .then(buildings => this.setState({ buildings: buildings }))
      }

    getToken() {
        return localStorage.getItem('id_token');
    }

    render() {
        console.log(this.state.buildings);
        return(
            <div>
            <select className="custom-select" id="siteName">
                    { this.state.buildings.map(item =>(
                    <option key={item.siteName}>{item.siteName}</option>
                    ))
                    }
                </select>
            </div>
        );
    }

... В настоящее время я получаю сообщение об ошибке: «Необработанный отказ (SyntaxError): неожиданное завершение ввода JSON» вэта строка кода: .then (results => results.json ()).Могу я получить помощь, пожалуйста?

1 Ответ

0 голосов
/ 19 мая 2018

Мне кажется, проблема в том, как вы ссылаетесь abc_energyprogramid

Измените это: 

fetch('http://buildingsAPI:111/api/buildings/?myparam1={abc_energyprogramid}')

на: 

fetch(`http://buildingsAPI:111/api/buildings/?myparam1=${abc_energyprogramid}`)

Обратите внимание нагалочки и строковый литерал шаблона ES6.

...