Render multiple JSON results to HTML list in react

Question

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;

you should stop what you are doing and remove the ability to run SQL code in your browser. never run sql queries via JS in the browser. anyone can pause on a breakpoint and write their own SQL query to execute. — John Ruddell
– John Ruddell, Commented Apr 9, 2017 at 2:20
Thanks, yes. I'm testing locally at the moment. I plan to put an escape in my query once I have everything working. — sortinousn
– sortinousn, Commented Apr 9, 2017 at 2:27
im not talking about escaping queries. im talking about running them in general — John Ruddell
– John Ruddell, Commented Apr 9, 2017 at 4:45

John Ruddell · Accepted Answer · 2017-04-09 02:22:16Z

1

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});

answered Apr 9, 2017 at 2:22

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

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

Collectives™ on Stack Overflow

Render multiple JSON results to HTML list in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related