如何通过不同的json映射并从数组获取数据

Question

I have created 2 different jsons and I need to get the courseName from both jsons using one function and populate them in a dropdown

I am currently able to do this using a map function on both jsons in separate option tags within an input element

import React from 'react'
import MesaLinda from './MesaLinda.json';
import TijerasCreek from './TijerasCreek.json';
import { Form, FormGroup, Label, Input, Button } from 'reactstrap'
import '../App.css';


const course = (props) => {
    return (
        <Form>
            <FormGroup>
                <Label for="courseSelect">Course</Label>
                <Input type="select" name="select" id="courseSelect" >
                    {MesaLinda.CostaMesaCCMesaLinda.map((mesaLinda, index) => {
                        return <option>
                            {mesaLinda.courseName}
                        </option>
                    })}
                    {TijerasCreek.TijerasCreek.map((tijerasCreek, index) => {
                        return <option>
                            {tijerasCreek.courseName}
                        </option>
                    })}
                </Input>
            </FormGroup>
            <FormGroup>

I want to be able to use one map function to iterate through multiple different json files to get the courseName

Answer 1

You can do something like:

import React from 'react'
import MesaLinda from './MesaLinda.json';
import TijerasCreek from './TijerasCreek.json';
import { Form, FormGroup, Label, Input, Button } from 'reactstrap'
import '../App.css';


const course = (props) => {
    return (
        <Form>
            <FormGroup>
                <Label for="courseSelect">Course</Label>
                <Input type="select" name="select" id="courseSelect" >
                    {[
                       ...MesaLinda.CostaMesaCCMesaLinda, 
                       ...TijerasCreek.TijerasCreek
                        ].map((json, index) => {
                        return <option>
                            {json.courseName}
                        </option>
                    })}
                </Input>
            </FormGroup>
         <FormGroup>

Concatenating two arrays using the spread operator, and then calling the same map function on it.

Answer 2

kasperlauge's answer is definitely great. If you're indeed planning on adding more and more jsons I'd suggest perhaps adding a function like this one outside of your current, and then calling it with an array of the jsons:

const jsonOptions = ( json ) => {
  return json.map( ( { courseName } ) => {
    return <options>
      { courseName }
    </options>;
  } );
};

const course = ( props ) => {
...
  <Input type="select" name="select" id="courseSelect">
    jsonOptions( [ 
      ...MesaLinda.CostaMesaCCMesaLinda, 
      ...TijerasCreek.TijerasCreek 
    ] )
  </Input>
...

It's just an alternative, I think it would scale better. ( Also note the destructuring inside the map(), it's very useful. )