Catch parts of a JSON vector

Question

Catch parts of a JSON vector

Navigation

#1 by (1 votes)

1

I am in doubt on the GET function of my JS code (React JS), I have the GET function using the Fetch api, it returns the values a certain link.json containing an array. Using this example link: link - I want to get the contents of the first 'Id' (1) and put in a part of the code, and another 'Id' (Example: 5) any of the array to another part of the code.

constructor(props) {
  super(props);
  this.state = {
      data:[]
      }
  }
  componentDidMount(){
        let URL = 'http://jsonplaceholder.typicode.com/posts'

           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('mensagens: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }

UPDATE:

      {
         this.state.data.map(obj => (
           if(obj.displayPortraitLeft == true){
             <div className="box-body">
            <div className="direct-chat-msg undefined">
                      <div className="direct-chat-info clearfix">
                      <span className="direct-chat-name pull-right">{obj.userName}</span>
                      <span className="direct-chat-timestamp pull-left">{obj.time}</span>
                      </div>
               </div>
             </div>
           }else{
               <div className="box-body">
            <div className="direct-chat-msg undefined">
                      <div className="direct-chat-info clearfix">
                      <span className="direct-chat-name pull-right">{obj.userName}</span>
                      <span className="direct-chat-timestamp pull-left">{obj.time}</span>
                      </div>
               </div>
             </div>
         ))
     }

Returns in browser: ./src/chat/Chat.js Syntax error: C: /Users/henri/Desktop/function/my-app/src/chat/Chat.js: Unexpected token (41:19)

  39 |              {
  40 |                  this.state.data.map(obj => (
> 41 |                    if(obj.displayPortraitLeft == true){
     |                    ^
  42 |                      <div>
  43 |                      <div className="box-body">
  44 |

restful react

asked by anonymous 05.11.2017 / 18:22

1 answer

How do I get a list of values common to two lists with LINQ? IF Condition - Display or Hide TextBox

score 1 · Accepted Answer

You can do this by using this.state.data as array that is and iterating with map to generate JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }
  componentDidMount(){
        let URL = 'https://jsonplaceholder.typicode.com/posts'
           fetch(URL)
           .then(function(response) {
              let data = response.json()
              return data;
           })
           .then((json) => {
              console.log('mensagens: ', json)
              this.setState({data : json});
           })
           .catch(function(ex) {
              console.log('parsing failed', ex)
           })
  }
  render(){
      return (
          <div>
            {
                this.state.data.map(obj => (
                  <div>{obj.id} {obj.title}</div>
                ))
            }
          </div>
      );
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>