How to convert string to JSON object and display in react component?

Question

I'm very new to React and Javascript. I am creating a simple search feature using React and Nodejs where you are able to search for tutors. I am trying to print the output of the search using react. My express server sends a response in the form of a string. It looks like the following:

'[{"tutorID":1,"email":"[email protected]","firstName":"John","lastName":"Doe","courseTeaching":"csc510","imageReference":" http://localhost:3001/john.png "}]'

I want to be able to display every key and its value in the form of a table. Can someone please help me achieve this?

The code for my search in react is given below:

import React, {useState} from 'react';
import "./SearchForm.css"; 
import SearchIcon from '@mui/icons-material/Search';
import DisplayResults from './DisplayResults.js'; 


class SearchForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedCategory: '',
            textSearch: '',
            searchResponse: []
        };

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;

        this.setState( {
            ...this.state,
            [target.name]: value
        });
    }

    handleSubmit(event) {
        event.preventDefault(); 
        let cat = this.state.selectedCategory;
        let searchquery = this.state.textSearch; 

        fetch(`http://localhost:3000/onSubmit?param1=${cat}&param2=${searchquery}`, {
            method: "GET",
            headers: {
                'Content-type': 'application/json'
            }
        })
        .then((result, err) => result.json())
        .then(contents => {
            this.setState({ searchResponse: contents}, function() {
                console.log(this.state.searchResponse);
            })
        });
    }

    render() {
        return (
            <>
            <p className="greeting">Hi, what would you like to search?</p>
            <form onSubmit={this.handleSubmit}>
                
            <div className="wrapper">

               <select class="theme" 
                name="selectedCategory"
                type="category"
                value={this.state.selectedCategory} 
                onChange={this.handleInputChange}>
                    <option value="all">Search All</option>
                    <option value="tutors">Tutors</option>
                    <option value="Courses">Courses</option>
                </select>
    
                <input className="searchBar" 
                name="textSearch" 
                type="text" 
                placeholder="search"
                value={this.state.textSearch}
                onChange={this.handleInputChange}>
                </input> 
                    

                <div className="searchIcon">       
                    <SearchIcon onClick={this.handleSubmit}/>
                </div>
            </div>

            </form>

            <DisplayResults searchResults={this.state.searchResponse}/>
        </>
        )
    }
}

export default SearchForm;

The code for the DisplayResults is below:

import React from 'react'; 

class DisplayResults extends React.Component {

    render() {
        return ( 
                <div>{this.props.searchResults}</div>
        ); 
    }
}

export default DisplayResults;

Any help would be much appreciated, thank you.

There is no such thing as a "JSON Object". JSON is a string representation of a javascript object. To convert JSON into an object, use theObject = JSON.parse(theString). To convert an object into a JSON string, use theString = JSON.stringify(theObject). — Daniel Beck
– Daniel Beck, Commented Nov 1, 2021 at 15:17
@DanielBeck Thank you for your response. I have changed the code so that the second .then accepts a contents. I console.logged the contents and it's returning an object. However, when I try to assign it to searchResponse in the SearchForm file, React is not letting me do that. It gives me an error saying "Objects are Not Valid As React Child". — Leks
– Leks, Commented Nov 1, 2021 at 15:44
...yes, that's because raw javascript objects can't be dropped into the DOM. Your displayResults component would need to pluck out whichever primitives inside that object you want to display: <div>{searchResults[0].email}</div> or etc — Daniel Beck
– Daniel Beck, Commented Nov 1, 2021 at 16:41

msvan · Accepted Answer · 2021-11-01 07:07:14Z

1

What you could do if the response was JSON is to use the .map property.

In this example I omitted the ' ' (at the start and end) from your set of data, to make it valid json.

let object = [{
"tutorID": 1,
"email": "[email protected]",
"firstName": "John",
"lastName": "Doe",
"courseTeaching": "csc510",
"imageReference": " http://localhost:3001/john.png "
}]

So you could probably do something like this to access the values.

const listItems = object.map((object) => console.log(object.tutorID))

So with .map you can return a component with the data, you just mapped over.

So after that it's up to you what you want to do with the data. So you can create a table, or use one from Bootstrap or something similar and just map the values out.

<Table>
<p>{object.tutorID}</p>
<p>{object.email}</p>
<p>{object.firstName}</p>
<p>{object.lastName}</p>
...
</Table>

If I said anything wrong, or if I didn't quite give you the answer you wanted then let me know.

answered Nov 1, 2021 at 7:07

msvan

393 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Leks Over a year ago

How would I be able to convert the string to a valid JSON object?

ShamPooSham Over a year ago

@Leks Instead of result.text() you should do result.json()

Leks Over a year ago

@ShamPooSham When I changed it from result.text() to result.json() i get the following error: Error: Objects are not valid as a React child (found: object with keys {tutorID, email, firstName, lastName, courseTeaching, imageReference}). If you meant to render a collection of children, use an array instead. I'm not really sure why this is happening.

msvan Over a year ago

@Leks Make sure the objects are inside an array.There is no .map on the Object object. However, if it is an Array of Objects. You can use .map. However, if you want to map over an object you can use object.keys, like this: stackoverflow.com/questions/14810506/…

ShamPooSham Over a year ago

@Leks Sounds like you get an object, not an array. Can you create an edit to your question with the code you have now?

|

Hayato · Accepted Answer · 2021-11-01 07:40:56Z

[Inside SearchForm] After receiving the response, let's turn your string data into something usable. Parse your string to an array of objects using JSON.parse(YOUR_DATA). You can then set your searchResponse state to this array.
[Inside DisplayResults] You have an array of objects, so iterate over them using YOUR_DATA.map(). Your map function should return some JSX. In this case you are making a table. This is a function which creates the table. We use Object.values(YOUR_OBJECT) to get all the values (e.g. John, Doe ...) and Object.keys(YOUR_OBJECT) to get the keys (e.g. firstName, lastName). You can use something like this in your render() function to create the table.

    const createTable = () => {
        const tableHeaders = (  // Get the table headers from the first person, OR enter them manually.
            <tr>
                {Object.keys(this.props.searchResults[0]).map(headerTitle => <th>{headerTitle}</th>)}
            </tr>
        );
        // All the content rows of the table.
        const tableRows = this.props.searchResults.map((tutor) => (
            <tr> {/* this is one row of the table. It is filled with td's which each have a piece of information about the tutor. */}
                {Object.values(tutor).map(value => ( // for each of the properties of the tutor, we create a table cell.
                    <td>{value}</td>    
                ))}
            </tr>
        ));
        // The actual table, with table headers and table rows.
        return (
            <table>
                {tableHeaders}
                {tableRows}
            </table>
        );
    }

brids · Accepted Answer · 2022-06-01 17:12:32Z

0

const listItems = object.map((object) => console.log(object.tutorID)) top of the line work for me.

answered Jun 1, 2022 at 17:12

brids

252 silver badges11 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to convert string to JSON object and display in react component?

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related