Reactjs : Better Managing the Input Box and Displaying Multiple items from a rest response

Question

I'm trying to display the rest-api response on reactjs front-end.

For instance, my rest-api endpoint is :

<http://url/searchquery/<db_name>/<sql_query>

a live example would be:

http://127.0.0.1:5002/sqlquery/A123vSearch/SELECT DATE,LABEL_NUMBER,FILENAME FROM FILE_INFO_SEARCH WHERE FILENAME MATCH 'C:/Test_Software/opencv_world320.dll'

In the above example, i have two questions:

1) How would i ask user to input two variable values (1 for db_name and 1 for sql_query) ? Should i use two input box or should i use '/' slash separator in one single box, which is easier to maintain?

2) If someone changes the sql_query from SELECT DATA, LABEL_NUMER TO SELECT * How, would i display all the table list in the webpage?

Here is my current 'SearchQuery.js' file

export default class SearchQuery extends React.Component{

    constructor(){
        super();
        this.state = {
            query : "SELECT DATE,LABEL_NUMBER,FILENAME FROM FILE_INFO_SEARCH WHERE FILENAME MATCH 'opencv_world320.dll'",

        };
    }

    componentDidMount(){
        this.SearchQuery();
        }


      updateSearch(){
        this.setState({query: this.refs.query.value});
        this.SearchQuery(this.refs.query.value);

       }

       render(){
           var tables = _.map(this.state.tables, (table) => {
        return  <li>{table.FILENAME}</li>; 



        return <div align="center">
            <br/><br/>
            <input ref="query" onChange={(e) => {this.updateSearch();}} type="text" value={this.state.query} />
            <br/><br/>


            <ul>{tables}</ul>

            </div>;
        }

        SearchQuery(query = "SELECT DATE,LABEL_NUMBER,FILENAME FROM FILE_INFO_SEARCH WHERE FILENAME MATCH 'opencv_world320.dll'"){
            var url = `http://127.0.0.1:5002/sqlquery/AvSearch/${query}`;
            Request.get(url).then((response) => {
                console.log(response);
                this.setState({
                    tables: response.body.output, 
                    total: response.body.totalResults
            }); 
        });
    }
}

The above code works fine if i use the standard Query that i have mentioned in the Live Example but doesn't work, if i use the query as 'SELECT *'

Here is my api-response:

   {
        "output": [
            {
                "CLIENT_NAME": "dusii", 
                "FILENAME": "C:/Test_Software/opencv_world320.dll", 
                "FILE_DATE": "2016-12-23 15:56:17", 
                "LABEL_NUMBER": "11", 
                "PERM": "----------", 
                "SIZE": "39.91 MB", 
                "USER": "srt/None"
            }, 
}

I know that something needs to be changed to display an array of items in table form, its just that i don't know how to do that...something at this line <li>{table.FILENAME}</li>

There is no error..Its just that, if the query changes to SELECT * i don't know how to parse all columns of that table... — PanDe, Apr 27 '18 at 16:27

Incepter · Answer 1 · 2018-04-27T16:38:49.677

0

1- I recommend using two input fields, simply because those are two information and you would not manage two information in one field, it will just increase your time spent try to manage it.

2- You can use a pick list to chose the fields to select.. and in response you theoretically have the columns name as IDs of your json response.

NB: in the map you did to map over fields, add a key

NB2: the search action should be bind with a button click, else on each user input you send requests to the server.. and you are not using any library to manage your side effects, like Redux to control your global application with flux, and Redux-saga for side effects.

The title of your question does not match your questions, if you can kindly change it

To control your response, you can use the method described in this post you can iterate over the object.keys to key keys..

edited Apr 27 '18 at 16:38

answered Apr 27 '18 at 16:29

Incepter

2,711
15
33

Thanks for #1, for #2 can you give an example or reference to a post? Also, for the side-effects part, again can you refer me or show an example of change or library? – PanDe Apr 27 '18 at 16:34
Of course, i will edit my post to give you a library, but for the #2, can you please post an example of your response ? – Incepter Apr 27 '18 at 16:35
i just did ...posted the example out of rest-api – PanDe Apr 27 '18 at 16:38
I edited too, i posted a reference for a post that iterates over an object keys, as you exactly need – Incepter Apr 27 '18 at 16:39
I believe it's a really small project, redux won't add a lot of value to it.. – Incepter Apr 27 '18 at 16:40
So, are you saying avoid redux? i want it to be very simple. is there a workaround that exists? – PanDe Apr 27 '18 at 17:30
Sorry for the late answer, did you solve your problem ? And yes, your app is really simple, it will be better avoiding redux – Incepter May 02 '18 at 09:26

Reactjs : Better Managing the Input Box and Displaying Multiple items from a rest response

1 Answers1