ReactJS - Object Keys - Nested keys/values

Question

I'm trying to pull in specific values from a JSON File. I am attaching data to the component, which then gets passed through the getProjectsList function, which should then look for a specific JSON file and render that data within a list item.

This is my Component

class OpenProjectsHome extends React.Component {
    constructor () {
        super();

        this.getProjectList = this.getProjectList.bind(this);
    }

    getProjectList(project) {
        var projectNameFile = openProjectsData[project]
        var url = window.location.protocol + "//" + window.location.host + "/open-projects/" + projectNameFile;


        let clientName = "";
        let projectName = "";
        var startDate = "";
        var component = this;

        var jqxhr = $.get( url, function(myData) {
            // console.log(myData)
            console.log(myData[0].Client)
            console.log(myData[0].Project)
            console.log(myData[0].StartDate)
            clientName = myData[0].Client
            projectName = myData[0].Project
            startDate = myData[0].StartDate
          })
        .fail(function() {
            alert( "error" );
        });

        var projectURL = "project?=" + projectName;

        return (
            <li>
                <a href={projectURL} title="">
                    <h6 className="eyebrow">{clientName}</h6>
                    <h6>{projectName}</h6>
                    <span><strong>Started:</strong> {startDate}</span>
                </a>
            </li>
        )
    }
    render() {
        return(
            <section className="project-lists project-lists--current">
                <div className="panel">
                    <div className="panel__header">
                        <h4 className="panel__title">Open Projects</h4>
                    </div>
                    <div className="panel__content">

                        <ul className="unordered-list">
                            {/* /////
                            ///// WORKS
                            ///// */}
                            {Object.keys(this.props.data).map(this.getProjectList)}
                        </ul>

                    </div>
                </div>
            </section>
        );
    }
}

Its rendering out the two <li> but my variables clientName, ProjectName, StartDate are all rendering as null within the return (the console.log within the $.get are working)

Any help would be greatly appreciated.

the answer to your question.. https://stackoverflow.com/a/16825593/10039122 — Yasin Tazeoglu, Oct 31 '18 at 13:25

score 0 · Answer 1 · answered Oct 31 '18 at 13:29

0

you should use setState and the axios and arrow function

         var jqxhr =axios.get(url, (myData)=>{
        // console.log(myData)
        this.setState({
        clientName : myData[0].Client,
        projectName : myData[0].Project,
        startDate = myData[0].StartDate
        })
        console.log(myData[0].Client)
        console.log(myData[0].Project)
        console.log(myData[0].StartDate)

      })
    .fail(function() {
        alert( "error" );
    });

axios doc https://github.com/axios/axios

answered Oct 31 '18 at 13:29

Yasin Tazeoglu

884
8
14

Hi, Thanks for the info @yasin, but im still having trouble, I had added axios using CDN then adding that code to my component, but its still not working, i've removed the fail as its giving me an error so wont render anything. and my console logs no longer work. – ltjfansite Oct 31 '18 at 13:56
Oh, i added this.state = { clientName: "", projectName: "", startDate: "" }; to the constructor too – ltjfansite Oct 31 '18 at 14:08

ReactJS - Object Keys - Nested keys/values

1 Answers1