React JS not formatting the JSON code

Question

This is my react code and I want to print the JSON format code in table format using react JS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Initial Data Via AJAX</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
      <body>
      <div id="example"></div>
          <script type="text/jsx">
              var ImageCollect = React.createClass({
                    getInitialState: function() {
                        return {
                          phpData: []
                        };
                    },
                     componentDidMount: function() {
                        $.get(this.props.source, function(result) {
                          var collection = result;//when i print this by using console.log the collection is getting the JSON code
                          if (this.isMounted()) {
                            this.setState({
                              phpData : collection
                           });
                          }
                        }.bind(this));
                    },
                   render:function()
                    {
                     DBdata = this.state.phpData || [];
                        return (
                            <div>
                              <table>
                                <th>name</th>
                                  <th>email</th>
                                {DBdata.map(function(d){
                                     return(
                                        <tr>
                                        <td>{d.name}</td>
                                        <td><d.email</td>                                     
                                        </tr>
                                     )}
                                )}
                              </table>
                            </div>

                    )}

              });

                React.render(
                <ImageCollect source="http://localhost/PHP-React-Demo/index.php" />,
                  document.getElementById('example')
                );

          </script>

      </body>
</html>

And following is my JSON format code i getting from index.php file the output is only name and email

{"data":[{"id":"1","name":"param","email":"param@nadsoft.com","phone":"9890245130","marks":"65"},{"id":"2","name":"andy","email":"andy@gmail.com","phone":"9665815566","marks":"78"},{"id":"3","name":"asdf","email":"dfgfd@fgdfgd.com","phone":"2132323232","marks":"23"},{"id":"34","name":"rteret","email":"fdg@dfsdf","phone":"21312323232","marks":"23"},{"id":"4236","name":"kjhkj","email":"opiuio","phone":"9890245130","marks":"7"},{"id":"4237","name":"","email":"","phone":"","marks":"0"}]}

May i change the JSON code or the react ? where should i change and this react code is returning only name and email not the data.

Should it be `var collection = result.data` instead? – Dan Prince Dec 10 '15 at 04:37 — Dan Prince, Dec 10 '15 at 04:37

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

result is either a string or an object (if the JSON was parsed, but I doubt that). Either way it won't have a .map method.

If result is a string containing JSON, you have to parse it into a JavaScript object first:

var collection = JSON.parse(result);

You have to access the data property:

DBdata.data.map(...)

Learn more about how do work with nested data structures: Access / process (nested) objects, arrays or JSON

Your JSX code is also incorrect. The <th> elements must be inside a <tr> element.

edited May 23 '17 at 11:44

Community

1
1

answered Dec 10 '15 at 04:48

Felix Kling

795,719
175
1,089
1,143

I have tried for this componentDidMount: function() { $.get(this.props.source, function(result) { var collection = JSON.parse(result); console.log(collection.data); if (this.isMounted()) { this.setState({ phpData: collection }); } }.bind(this)); },. – Pramod Magi Dec 10 '15 at 05:06
Output is [Object { id="1", name="param", email="param@nadsoft.com", more...}, Object { id="2", name="andy", email="andy@gmail.com", more...}, Object { id="3", name="asdf", email="dfgfd@fgdfgd.com", more...}, Object { id="34", name="rteret", email="fdg@dfsdf", more...}, Object { id="4236", name="kjhkj", email="opiuio", more...}, Object { id="4237", marks="0", name="", more...}] and following by the error:- TypeError: DBdata.data is undefined }, – Pramod Magi Dec 10 '15 at 05:08
Thanks its working i just replace phpData: collection.data – Pramod Magi Dec 10 '15 at 05:26

React JS not formatting the JSON code

1 Answers1