Как мы можем отобразить данные бэкэнда в response.js?

-1

Как мы отображаем данные, которые мы получаем из backend и отображаем в response.js? Ниже приведены данные бэкэнд. Я хочу получить значение даты и времени и примечания от этого объекта.

Здесь я использую глобальную переменную для хранения ответа и хранения глобальной переменной в переменной состояния.

Мне нужно отображать данные заметки, дату и время из бэкэнд и отображать в методе рендеринга.

$.ajax({
        method: 'GET',
        url: 'http//.. //...',
        data: userDetails,
        dataType: 'json',
        jsonp: false,
        success: function(response) {
          MyVariables.userRecordFeed = response;
          console.log(  MyVariables.userRecordFeed)
          record_exist= response[0].record_exist
          MyVariables.medata_content= response[0].notes
          console.log(MyVariables.medata_content);
        }.bind(this),
        error: function() {
          console.log('There is a problem with server');
        }
      });

      this.setState({userRecordFeed:MyVariables.userRecordFeed, loadRecordNewsfeed: MyVariables.loadRecordNewsfeed, loadRecordOverlay: MyVariables.loadRecordOverlay,
           showAddRecordIconsIntro: MyVariables.showAddRecordIconsIntro})

    }
  render()
  {
      if(record_exist === 'yes') {
          console.log('exists');
      }
      else {
             userRecordFeedData = <div className="card">
             <div className="row card-header">
                 <div className="col-xs-2 col-sm-2 col-md-2 card-name-icon">
                   <span className="card-name-symbol">AJ</span>
                 </div>
                 <div className="col-xs-8 col-sm-8 col-md-8 card-name-time-date">
                    <div className="card-name">
                      Joined Medata
                    </div>
                    <div className="card-date">
                      5/04/2017
                    </div>
                    <span className="card-time">
                      12:55 PM
                    </span>
                </div>
                <div className="col-xs-2 col-sm-2 col-md-2 card-functionality">
                  <span className=" functionality-icon fa fa-ellipsis-v"></span>
                </div>
            </div>
            <div className="row card-bottom">
                 <div className="col-xs-2 col-sm-2 col-md-2 card-bottom-dots">
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="bottom_left_side_menu_icon">
                   </div>
                   <div className="card-bottom_left_side_menu_icon">
                   </div>
                   <div className="card-bottom_left_side_menu_icon">
                   </div>
                   <div className="landing-join-bottom_left_side_menu_icon">
                   </div>
                 </div>
                 <div className="col-xs-9 col-sm-9 col-md-9 ">
                   <p className="">Lorem Ipsum is simply dummy text of the printing and typesetting industry
                     Lorem Ipsum has been the industry  standard dummy text ever since the 1500</p>

                   </div>
                 <div className="col-xs-1 col-sm-1 col-md-1"></div>
            </div>
          </div>
        }

        return(
          <div >{userReacordFeedData}
          </div>
        }
    }

Бэкэнд-данные в этом формате:

Object
conditon
:
"something"
created_on_date_time
:
"6/23/2017 5:33:57 AM"
name
:
"Nitesh"
notes
:
"Lorem Ipsum is simply dummy text of the printing and typesetting industry  Lorem Ipsum has been the industry  standard dummy text ever since the 1500"
record_exist
:
"no"
  • 0
    Где делать, как вы хотите сделать, Как я вижу, в настоящее время вы замаскированы. Это то же самое место, где вы хотите сделать его динамичным
  • 0
    Не ответ .. Но я предлагаю использовать axios или fetch в приложении реакции, а не в ajax ..
Показать ещё 2 комментария
Теги:

1 ответ

0
Лучший ответ

Это пример, который должен помочь вам или дать вам идею, по крайней мере.

class App extends React.Component {

  constructor() {
    super();
    this.state = { countries: null };
  }

  componentDidMount() {
    fetch('https://restcountries.eu/rest/v2/name/united', {
        method: 'GET',
    })
    .then(results => results.json())
    .then(data => this.setState({ countries: data }))
    .catch(function(error) {console.log(error)});
  }

  _renderCountries(country, index) {
    return <li key={index}>{country.name} - {country.subregion}</li>
  }

    render() {
    const { countries } = this.state;

    return (
        <div>
        <h1>LIST OF COUNTRIES:</h1>
          <ul>
            {
            countries ?
            countries.map(this._renderCountries)
            :
            "no data to display"
          }
          </ul>
        </div>
    );
  }
}

В этом примере я использовал выборку. попробуйте скрипку здесь

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню