CODEWITHSUNDEEP
reactjs
user788448
user788448

Reputation: 797

Distinct Value in Json Data

I have a api call that returns data in json format. I would like to retrieve a distinct campus for dropdown list. For example, my json data format is like below:

courses=[{campusname; A, coursename: X, id: 1},
          {campusname: A, coursename: Y, id: 2},
          {campusname: B, coursename: Z, id: 3}]

But my code below does not return any selections here. I am not sure the Set() syntax is correct.

App.js:

import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
import CampusName from './CampusName';
class App extends Component {
constructor() {
super();
this.state ={
  courses:[]
}
}


componentDidMount(){

  axios.get('https://mydomain/myAPIURL')
       .then(response=>{
       this.setState({courses:response.data});
      });
  }
 _getUniqueCampusName(){
const courses=this.state.courses;
const campusSelection=[...new Set(courses)];
return campusSelection.map(campus=>(<CampusName name={campus.campusname}/>));

}
render() {
const campusName=this._getUniqueCampusName;
return (
  <div className="App">
    <div className="filter">
       <select>
         <option>Select a Campus</option>
        {campusName}

       </select>
    </div>

  </div>
 );
 }
}

export default App;

CampusName.js

import React from 'react';
const campusName=props=>{
return(
   <option value={props.name}>{props.name}</option>
);
}
export default campusName;

Upvotes: 1

Views: 2300

Answers (1)

Harsh Makadia
Harsh Makadia

Reputation: 3433

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      courses: [
        { campusname: "A", coursename: "X", id: 1 },
        { campusname: "A", coursename: "Y", id: 2 },
        { campusname: "B", coursename: "Z", id: 3 }
      ]
    };
    this._getUniqueCampusName = this._getUniqueCampusName.bind(this);
  }

  _getUniqueCampusName() {
    const courses = this.state.courses;
    const campusSelection = [...new Set(courses.map(item => item.campusname))];
    //console.log(campusSelection);
    return campusSelection.map((campus, index) => (
      <option key={index}>{campus}</option>
    ));
  }

  render() {
    const campusName = this._getUniqueCampusName();
    return (
      <div className="App">
        <div className="filter">
          <select>
            <option>Select a Campus</option>
            {campusName}
          </select>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

https://codesandbox.io/s/r4z9z7zjmo

Here is the working example for your problem. There seems to be a mistake while you used Set function in javascript

Upvotes: 2

Related Questions