React-Native WebView postMessage get json object

Question

I can successfully send postMessage to WebView but my question is how can i extract json object from event.data. Is there any possible way to get json object

document.addEventListener("message", function(event) {
  console.log("Received post message", event);//Get Event from React Native
  alert(event.data);
}, false);

Following is the code:

import React, { Component } from 'react'
import { ScrollView, Button, WebView, View, TouchableHighlight, Text } from 'react-native'
import { connect } from 'react-redux' 


class UserData extends Component {
  constructor (props) {
    super(props)
    this.state = {}
 }
render () {
  let html = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
  <div id="myContent">
  </div>
  </body>
  </html>  
` 

let jsCode = `
document.addEventListener("message", function(event) {
  console.log("Received post message", event);
  alert(event.data);
}, false);

var data = [150, 230, 180, 90, 151, 55];

var svg = d3.select("#myContent") //used to display graph
        .append("svg")
        .attr("width", 900)
        .attr("height", 2000);

svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr({
        class : "bar",
        width : function(d) {return d;},
        height: "40",
        y : function(d, i) {return i*50 + 10;},
        x : "10"
    });

`

return (
    <View style={styles.container}>
      <TouchableHighlight 
      onPress={() => this.sendPostMessage()}>
          <Text>Send post message from react native</Text>
      </TouchableHighlight>
      <WebView
        style={styles.webView}
        ref={( webView ) => this.webView = webView}
        html={html}
        injectedJavaScript={jsCode}
        javaScriptEnabled={true}
        scrollEnabled={true}
      >
      </WebView>
    </View>
  );
  }//End of Render

  sendPostMessage() {
    console.log( "Sending post message" );
    var UserData={
      UserName: "XYZ",
      userid: "123456789"
    }
    this.webView.postMessage(UserData); //Post Message to WebView
  }//End of Send Post Message function

}//End of Class

Does anyone know how to extract json-object in the WebView receiving from react-native

Documentation used : http://facebook.github.io/react-native/releases/0.46/docs/webview.html

i have tried

document.addEventListener("message", function(event) {
   console.log("Received post message", event);//Get Event from React Native
   alert(event.data);
   alert(event.data.UserName);
}, false);

Solominh Solominh · Accepted Answer · 2018-05-02T17:48:27

I think you must use JSON.stringify(), and then use it as the first argument in window.postMessage()

See docs : https://facebook.github.io/react-native/docs/webview.html#onmessage

window.postMessage accepts one argument, data, which will be available on the event object, event.nativeEvent.data. data must be a string.

React-Native WebView postMessage get json object

1 Answers