JSON-объект с рельсов не обрабатывается в .js.erb

Question

У меня в контроллере следующий хеш:

@suggested_places = {
      "0": "Barcelona",
      "1": "Madrid",
      "2": "Valencia"
    }

Я преобразую его в json:

@suggested_places_json = @suggested_places.to_json

Вот вывод:

=> "{\"0\":\"Barcelona\",\"1\":\"Madrid\",\"2\":\"Valencia\"}"

В моем файле .js.erb я хочу поиграть с информацией.Я хочу разобрать JSON в объект JavaScript.Я делаю:

const json = "<%= @suggested_places_json %>";
console.log(json);

Со следующим результатом:

{"0":"Barcelona","1":"Madrid","2":"Valencia"}

Почему у меня "уродливый", а не тот JSON, который у меня был в бэкэнде? JSON - это строка, этодолжен сохранить его форму.

Если я попытаюсь разобрать его:

console.log(JSON.parse(json));

У меня будет следующий результат:

Uncaught SyntaxError: Unexpected token & in JSON at position 1
    at JSON.parse (<anonymous>)
    at <anonymous>:6:18
    at processResponse (application-50000f29e1bf2752ae7e56dda39f10dd0f67a47aea5c3f07ed0d933f3e1a256a.js:268)
    at application-50000f29e1bf2752ae7e56dda39f10dd0f67a47aea5c3f07ed0d933f3e1a256a.js:196
    at XMLHttpRequest.xhr.onreadystatechange (application-50000f29e1bf2752ae7e56dda39f10dd0f67a47aea5c3f07ed0d933f3e1a256a.js:251)

Может ли кто-нибудь помочь мне выяснить, где я нахожусьделает ошибку? Что мне не хватает?

Answer 1

Два способа передачи данных из вашего контроллера в представления:

Опция 1:

Вы отправили из представления запрос json в контроллер:

= link_to "load public places", load_public_places_path(format: :json), class: "btn btn-primary", remote: true, id: "loadPublicPlacesBtn"

В вашем контроллере вы отвечаете в формате json, и данные, которые вы хотите вернуть:

def load_public_places
    latitude = params[:lat]
    longitude = params[:lng]
    @suggested_places = NearBySearchApiService.call(latitude, longitude)

    respond_to do |format|
      format.json { render json: @suggested_places.to_json }
      format.js
    end

В представлении, где вы хотите отобразить данные, вы слушаете запрос ajax:

:javascript
  document.getElementById('loadPublicPlacesBtn').addEventListener('ajax:success', function(event) {
    console.log(event);
  })

Вариант 2:

В представлении вы отправляете контроллеру запрос JS:

  = link_to "load public places with js", load_public_places_path, class: "btn btn-primary", remote: true, id: "loadPublicPlacesBtn"

В контроллере вы отвечаете за запрос js, которыйбудет в load_public_places.js.erb

def load_public_places
    latitude = params[:lat]
    longitude = params[:lng]
    @suggested_places = NearBySearchApiService.call(latitude, longitude)

    respond_to do |format|
      # format.json { render json: @suggested_places.to_json }
      format.js
    end

На этот раз, так как вы используете erb в представлениях, вы можете использовать переменную экземпляра @suggested_places без вызова to_json.

InВ представлении вы выбираете нужный div и добавляете содержимое HTML (вы можете сохранить его в части)

const divWrapper = document.getElementById("optionCardsWrapper");

divWrapper.innerHTML = "<%= j render "option_cards", suggested_places: @suggested_places %>";

@ said_places - это чистый ruby, вам не нужно его анализировать.

j - вспомогательный метод escape_javascript.

В pArtial View вы можете использовать информацию в качестве обычного объекта ruby ​​

%h1 option cards

- suggested_places.each do |place|
  = place[:name]

Answer 2

во-первых, вы не можете проанализировать вывод json, так как вы уже поместили @ said_places.to_json, так что этого будет достаточно для получения данных, во-вторых, & quot генерируется из-за ("), вставленного в json, так что если вы Если вы хотите удалить это & ​​quot, вы должны либо декодировать вывод, либо разбивать символы, такие как \ "из вывода, но лучший способ - это первый, который должен декодировать вывод