CODEWITHSUNDEEP
javascriptjsonreactjsdomrendering
sortinousn
sortinousn

Reputation: 647

Render multiple JSON results to HTML list in react

I'm trying to render a list of JSON objects in react (result). I have most of the functionality working, however I'm only able to show one HTML JSON object out of a list that has multiple entries. (Example: I search for SMITH and I get multiple entries in the console however only one entry gets returned in HTML) Here's a screenshot of the list that is rendered.

What's the best method to render a list of all my JSON entries rather than a single entry? 

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import {Link} from 'react-router';
import {render} from 'react-dom';
import login from '../pages/login.js';
import store from '../libs/store.js';
var jsforce = require('jsforce');

class menuScreen extends React.Component {

constructor(props) {
    super(props)

    const data = store.getState();

    this.state = {

        username: '',
        messages: data.messages
    }
}

handleSearch(e) {
    this.setState({username: e.target.value})
}

handleChange(evt) {
    this.setState({
        username: evt.target.value.substr(0, 100)
    });

}

onLinkClicked() {

    var parent = this.state.username
    //console.log(this.state.username)
    var conn = new jsforce.Connection({serverUrl: 'https://cs63.salesforce.com', accessToken: sessionStorage.getItem('token')})
    conn.query("SELECT Id, Name, Phone FROM Contact WHERE LastName='" + parent + "'", (err, result) => {
        if (err) {
            return console.error(err);
        }

        var a = result

        a.records.forEach((item) => {
            result = (item.Name + ' ' + item.Phone);
            this.setState({result: result});

        });

    })
}

render() {
    console.log(this.state.result)
    return (

        <div className='menubox' id='menubox'>
            <div className='searchbar-container'>
                <form onSubmit={e => e.preventDefault()}>
                    <input type='text' size='25' placeholder='Contact Last Name' onChange={this.handleChange.bind(this)} value={this.state.username}/>
                    <button type='submit' onClick={this.onLinkClicked.bind(this)}>
                        Search
                    </button>
                </form>
            </div>
            <div dangerouslySetInnerHTML={ { __html: this.state.result } }></div>
        </div>

    )

 }

}

export default menuScreen;

Upvotes: 1

Views: 1171

Answers (1)

John Ruddell
John Ruddell

Reputation: 25852

STOP! do not give the browser access to your database. Do not let the browser run sql queries. 

conn.query("SELECT Id, Name, Phone FROM Contact WHERE LastName='" + parent + "'", (err, result) => {

if I set a breakpoint on this line and decide to run my own query it wouldn't be good.

conn.query("DROP table Contact")

Now, with that said... your issue is you are only ever storing one result to be viewed

const elems = [];
a.records.forEach((item) => {
    result = (item.Name + ' ' + item.Phone);
    elems.push(result);
});
this.setState({result: elems});

Upvotes: 1

Related Questions