읽을 수있는 (이스케이프되지 않은) json을 HTML 데이터 속성으로 렌더링 할 수 있습니까?

패트릭 컬렌

우리는 json을 ERB의 데이터 속성으로 렌더링하고 있습니다. 예 :

location.html.erb

<div data-location="<%= render 'location_json' %>">

location_json.erb

<%= @location.to_json(
      only: [:id, :name, :lat, :lng],
      method: [:display_name]) %>

렌더링 된 HTML은 다음과 같습니다.

<div data-location="{&quot;id&quot;:16,&quot;lat&quot;:&quot;35.688195&quot;,&quot;lng&quot;:&quot;-82.564652&quot;,&quot;name&quot;:&quot;Mountain&quot;}">

그러나 나는 그것을 더 읽기 쉽게하고 싶다.

<div data-location='{"id":16, "lat":35.688195, "lng":-82.564652, "name":"Mountain"}'>

ERB 또는 to_json에게 큰 따옴표를 이스케이프하는 대신 작은 따옴표로 렌더링하도록 지시하는 방법이 있습니까?

읽을 수있는 json을 HTML 데이터 속성으로 렌더링 할 수 있습니까? 읽을 수 있다는 것은 최소한의 탈출을 의미합니다.

패트릭 컬렌

html 페이지를 깨지 않고 데이터 속성에서 이스케이프 처리되지 않은 JSON을 사용할 수 없습니다.

그러나 Rails / ERB 기본값보다 더 읽기 쉬운 이스케이프 된 JSON을 사용할 수 있습니다.

기본적으로 ERB는 큰 따옴표를 이스케이프하므로 JSON을 특히 읽기 어렵습니다. 대신

  • html 데이터 속성에 작은 따옴표 사용
  • ERB가 문자열에서 기본 이스케이프를 사용하지 못하도록 raw 호출
  • 큰 따옴표를 제외하고 문자열의 모든 html 중요한 문자를 이스케이프합니다.

helper.rb

def my_html_escape(s)
  { '&' => '&amp;', '>' => '&gt;', '<' => '&lt;', "'" => '&#39;' }.each do |k,v|
   s = s.gsub(k,v)
  end
  s
end

location.html.erb

<div data-location='<%= raw my_html_escape(@location.to_json) -%>'>

생산하다

<div data-location='{"id":16, "lat":35.688195, "lng":-82.564652, "name":"Mountain"}'>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Ember의 dom으로 렌더링되기 전에 뷰가 생성 할 html을 볼 수있는 방법이나 도구가 있습니까?

분류에서Dev

html을 렌더링 할 수있는 터미널 에뮬레이터가 있습니까?

분류에서Dev

C # XSLT 확장 함수는 이스케이프되지 않은 XML로 사용되는 XML 조각을 어떻게 반환 할 수 있습니까?

분류에서Dev

R Markdown에서 렌더링 된 HTML 문서에 "위로 이동"버튼을 추가 할 수 있습니까?

분류에서Dev

lldb가 이스케이프 처리되지 않은 리턴 문자를 포함하는 인수로 명령을 실행할 수 있습니까?

분류에서Dev

ActiveRecord 렌더링 row_to_json을 이스케이프 문자열로, 순수한 JSON으로 렌더링하는 방법은 무엇입니까?

분류에서Dev

어떻게 말 그대로 HTML을 렌더링하지 않고 PHP를 사용하여 사이트에 인쇄 할 수 있습니까?

분류에서Dev

HTML 캔버스로 렌더링 할 수있는 최대 이미지 크기가 있습니까?

분류에서Dev

데이터 테이블을 렌더링 할 수 없습니다.

분류에서Dev

WebGL이 렌더링되지 않는 것은 경고와 관련이있을 수 있습니다.

분류에서Dev

html 속성에서 js 문자열로 \ n을 어떻게 이스케이프 할 수 있습니까?

분류에서Dev

특정 JSON 데이터를 어떻게 렌더링 할 수 있습니까?

분류에서Dev

.each ()를 사용하지 않고이 컬렉션을 렌더링 할 수 있습니까?

분류에서Dev

이 JSON을 더 효율적으로 구문 분석하는 데 사용할 수있는 속성 또는 변환기가 있습니까?

분류에서Dev

Ajax 부분 렌더링에 데이터 응답을 피기 백 할 수 있습니까?

분류에서Dev

각도 2에서 사용자 지정 파이프를 사용하면 HTML로드시 데이터를로드 할 수 없습니다. 오류가 발생하여 정의되지 않은 속성을 읽을 수 없습니다.

분류에서Dev

데이터를 사용할 수 있지만 React Native가 소품을 렌더링하지 않음

분류에서Dev

Echars는 많은 데이터를 처리 할 때 부드러운 선을 렌더링 할 수 없습니다.

분류에서Dev

속성이 정의되어 있어도 정의되지 않은 '헤더'속성을 읽을 수 없습니다.

분류에서Dev

레이아웃보기를 렌더링하는 동안 정의되지 않은 속성 'render'를 읽을 수 없습니다.

분류에서Dev

소프트웨어 렌더링을 사용하는 경우 GPU없이 PC를 부팅 할 수 있습니까?

분류에서Dev

정의되지 않은 '데이터'속성을 읽을 수 없습니다.

분류에서Dev

특수 문자가있는 데이터베이스 값은 데이터베이스의 데이터가 아닌 HTML 번호로 렌더링됩니다.

분류에서Dev

이 불변 속성을 자동 속성으로 변환 할 수 있습니까?

분류에서Dev

읽을 수있는 스트림을 다른 읽을 수있는 스트림으로 어떻게 파이프 할 수 있습니까?

분류에서Dev

위젯이 렌더링되기 전에 제약 조건을 오버플로하는지 어떻게 감지 할 수 있습니까?

분류에서Dev

변경되지 않는 데이터를 어떻게 읽을 수 있습니까?

분류에서Dev

MySQL 데이터베이스에서 변환되지 않은 값을 어떻게 선택할 수 있습니까?

분류에서Dev

TypeError 얻기 : AngularJS로 만든 AuthInterceptor 서비스를 포함하려고 할 때 정의되지 않은 '데이터'속성을 읽을 수 없습니다.

Related 관련 기사

  1. 1

    Ember의 dom으로 렌더링되기 전에 뷰가 생성 할 html을 볼 수있는 방법이나 도구가 있습니까?

  2. 2

    html을 렌더링 할 수있는 터미널 에뮬레이터가 있습니까?

  3. 3

    C # XSLT 확장 함수는 이스케이프되지 않은 XML로 사용되는 XML 조각을 어떻게 반환 할 수 있습니까?

  4. 4

    R Markdown에서 렌더링 된 HTML 문서에 "위로 이동"버튼을 추가 할 수 있습니까?

  5. 5

    lldb가 이스케이프 처리되지 않은 리턴 문자를 포함하는 인수로 명령을 실행할 수 있습니까?

  6. 6

    ActiveRecord 렌더링 row_to_json을 이스케이프 문자열로, 순수한 JSON으로 렌더링하는 방법은 무엇입니까?

  7. 7

    어떻게 말 그대로 HTML을 렌더링하지 않고 PHP를 사용하여 사이트에 인쇄 할 수 있습니까?

  8. 8

    HTML 캔버스로 렌더링 할 수있는 최대 이미지 크기가 있습니까?

  9. 9

    데이터 테이블을 렌더링 할 수 없습니다.

  10. 10

    WebGL이 렌더링되지 않는 것은 경고와 관련이있을 수 있습니다.

  11. 11

    html 속성에서 js 문자열로 \ n을 어떻게 이스케이프 할 수 있습니까?

  12. 12

    특정 JSON 데이터를 어떻게 렌더링 할 수 있습니까?

  13. 13

    .each ()를 사용하지 않고이 컬렉션을 렌더링 할 수 있습니까?

  14. 14

    이 JSON을 더 효율적으로 구문 분석하는 데 사용할 수있는 속성 또는 변환기가 있습니까?

  15. 15

    Ajax 부분 렌더링에 데이터 응답을 피기 백 할 수 있습니까?

  16. 16

    각도 2에서 사용자 지정 파이프를 사용하면 HTML로드시 데이터를로드 할 수 없습니다. 오류가 발생하여 정의되지 않은 속성을 읽을 수 없습니다.

  17. 17

    데이터를 사용할 수 있지만 React Native가 소품을 렌더링하지 않음

  18. 18

    Echars는 많은 데이터를 처리 할 때 부드러운 선을 렌더링 할 수 없습니다.

  19. 19

    속성이 정의되어 있어도 정의되지 않은 '헤더'속성을 읽을 수 없습니다.

  20. 20

    레이아웃보기를 렌더링하는 동안 정의되지 않은 속성 'render'를 읽을 수 없습니다.

  21. 21

    소프트웨어 렌더링을 사용하는 경우 GPU없이 PC를 부팅 할 수 있습니까?

  22. 22

    정의되지 않은 '데이터'속성을 읽을 수 없습니다.

  23. 23

    특수 문자가있는 데이터베이스 값은 데이터베이스의 데이터가 아닌 HTML 번호로 렌더링됩니다.

  24. 24

    이 불변 속성을 자동 속성으로 변환 할 수 있습니까?

  25. 25

    읽을 수있는 스트림을 다른 읽을 수있는 스트림으로 어떻게 파이프 할 수 있습니까?

  26. 26

    위젯이 렌더링되기 전에 제약 조건을 오버플로하는지 어떻게 감지 할 수 있습니까?

  27. 27

    변경되지 않는 데이터를 어떻게 읽을 수 있습니까?

  28. 28

    MySQL 데이터베이스에서 변환되지 않은 값을 어떻게 선택할 수 있습니까?

  29. 29

    TypeError 얻기 : AngularJS로 만든 AuthInterceptor 서비스를 포함하려고 할 때 정의되지 않은 '데이터'속성을 읽을 수 없습니다.

뜨겁다태그

보관