Question

how to match username and their profile links and how to show the fetched data in table

Posted February 23, 2021 122 views
DrupalAPIReactDigitalOcean API and CLI (doctl)

here im stuck in a problem.here i fetched users and their profile links from the site drupal.org using RegEx. but i got another links also.i want to fetch their profile links only and match the users and their profile links and show data in table is it possible in React js?

import React,{ Component } from "react"

import Axios from "axios"

class UserList extends Component {
    constructor(prop) {
        super(prop);
        this.onChangeUserName = this.onChangeUserName.bind(this);

        this.onSubmit = this.onSubmit.bind(this);

        this.state = { users: null, profile:"", name:"" }
    }

    onChangeUserName(e) {
      this.setState({ name: e.target.value })
  }

  onSubmit(e) {
    e.preventDefault()

    const userObject = {
        name: this.state.name,

    };
    Axios.get(`https://www.drupal.org/search/user/${this.state.name}`).then(
      response => {
          if (response.status === 200) {
              // all is good
              console.log('all is good');
              console.log(response);
              var olList = response.data.match(/(?<=\<ol class="search-results user-results"\>\s+).*?(?=\s+\<\/ol)/gs);

              var links = response.data.match(
                /(\b(https?):\/\/[-A-Z0-9+&@#\\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

              );
              //preg_match_all('|https?://(?:www\.)?twitter.com/#!/[a-z0-9_]+|im', $text, $matched)

              this.setState({ users: olList });
              this.setState({ profile: links });
            } else {
                console.log('something is wrong');
                // something is wrong
            }
        }
    );

  }

    render() {
        return ( <React.Fragment>

          <h1 > Search Here users of Drupal < /h1> 
           <form align = "center" onSubmit = { this.onSubmit } >
            <input type = "search" name = "name" onChange = { this.onChangeUserName } placeholder = "Search" required / >
            <button type = "submit" > Search < /button >   
            </form >

          <h3>Relevent Search Results For Your Keywords : </h3>

              <table border="2" height="100" width="300">
                  <tr>
                    <td align="center"><h2>Username</h2></td> 
                    <td><h2>Profile Links</h2></td> 

                  </tr>

                  <tr>

                      <td dangerouslySetInnerHTML = { 
                          { __html: this.state.users }
                            } />

                      <td align="char" dangerouslySetInnerHTML = {
                          { __html: this.state.profile }

                        } />
                  </tr>
              </table>

        </React.Fragment>
        );
    }
}

export default UserList;
Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!