Question

我有一个名为data.json的文件，其中有一个名为“标签”的对象。我正在尝试用JSON对象中的元素填充表单中的标签。

JSON对象：

 "Labels": [
    {
      "siteName": "Site Name"
    },
    {
      "siteAdd": "Site Address"
    },
    {
      "siteCounty": "Site County"
    },
    {
      "Location": "Site Location"
    },
    {
      "gps": "GPS: Entrance/Exit"
    },
    {
      "w3w": "W3W: Entrance/Exit"
    },
    {
      "information": "Information"
    },
    {
      "email": "Site Email"
    },
    {
      "number": "Site Phone Number"
    },
    {
      "Categories": "Site Category(s)"
    },
    {
      "times": "Opening Times"
    },
    {
      "fees": "Admission Fees"
    },
    {
      "access": "Accessability"
    },
    {
      "text": "Text Narrative"
    },
    {
      "text-header": "Header"
    },
    {
      "text-content": "Content"
    }
  ]

FORM：

<Form onSubmit={this.handleSubmit} className="form">
                {/* General Information */}
                <FormGroup row>
                    <Label for="siteName" id="siteName" sm={2}></Label>
                    <Col sm={10}>
                        <Input type="text" name="siteName" id="siteName" placeholder="" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="siteAddress" sm={2}>Site Address</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="siteAddress" id="siteAddress" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="" sm={2}>Site County</Label>
                    <Col sm={10}>
                        <Input className="form-control" type="select">
                            { counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
                        </Input>
                    </Col>
                </FormGroup>
                <hr/>
                {/* Location Information */}
                <p className="heading">Location</p>
                <FormGroup row>
                    <Label for="gps" sm={2}>GPS: Entrance/Exit</Label>
                    <Col sm={10}>
                        <Input type="text" name="gps" id="gps" placeholder="entrance 3 words , exit 3 words" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="w3w" sm={2}>W3W: Entrance/Exit</Label>
                    <Col sm={10}>
                        <Input type="text" name="w3w" id="w3w" />
                    </Col>
                </FormGroup>
                <hr/>
                <p className="heading">Information</p>
                <FormGroup row>
                    <Label for="siteEmail" sm={2}>Site E-mail</Label>
                    <Col sm={10}>
                        <Input type="email" name="siteEmail" id="siteEmail" placeholder="example@example.com" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="siteNumber" sm={2}>Site Phone Number</Label>
                    <Col sm={10}>
                        <Input type="tel" name="siteNumber" id="siteNumber" placeholder="" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="siteCat" sm={2}>Site Category(s)</Label>
                    <Col sm={10}>
                        <Input type="text" name="siteCat" id="siteCat" multiple />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="openTimes" sm={2}>Opening Times</Label>
                    <Col sm={10}>
                        <Input type="text" name="openTimes" id="openTimes" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="fees" sm={2}>Admission Fees</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="fees" id="fees" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="access" sm={2}>Accessability</Label>
                    <Col sm={10}>
                        <Input type="text" name="access" id="access" />
                    </Col>
                </FormGroup>
                <hr/>
                <p className="heading">Text Narrative</p>
                <FormGroup row>
                    <Label for="txt-header" sm={2}>Header</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="txt-header" id="txt-header" />
                    </Col>
                </FormGroup>
                <FormGroup row>
                    <Label for="txt-content" sm={2}>Content</Label>
                    <Col sm={10}>
                        <Input type="textarea" name="txt-content" id="txt-content" />
                    </Col>
                </FormGroup>
                <FormGroup check row>
                    <Col sm={{ size: 10, offset: 2 }}>
                        <Link to="/newSite/tours"><Button className="btn-primary">Tours &rarr;</Button></Link>
                    </Col>
                </FormGroup> 
            </Form>

到目前为止，我已经尝试过：

{labels.siteName} 使用document.getElementbyID并更改值。即使当我console.log时，它也将以未定义的形式返回。我正在使用json加载程序将其导入到我的react组件中。

Answer 1

Labels是一个对象数组。您可以将其简化为常规对象，以便于使用。

const labels = obj.Labels.reduce((acc, label) => {
  Object.keys(label).forEach(key => {
    acc[key] = label[key];
  });
  return acc;
}, {});

然后，您可以像在问题中概述的那样使用该对象：

<Form onSubmit={this.handleSubmit} className="form">
  {/* General Information */}
  <FormGroup row>
    <Label for="siteName" id="siteName" sm={2} />
    <Col sm={10}>
      <label>
        {labels.siteName}
        <Input type="text" name="siteName" id="siteName" placeholder="" />
      </label>
    </Col>
  </FormGroup>
  {/* ... */}
</Form>

Answer 2

通过labels导入的

您的json-loader是对象的数组，而不是是由键值对填充的对象。考虑到您似乎想要使用labels对象的方式-也就是说，作为一堆键值对，我建议您将JSON数据重组为如下所示：

labels.json

{
  "Labels": {
    "siteName": "Site Name",
    "siteAdd": "Site Address",
    "siteCounty": "Site County",
    "Location": "Site Location",
    "gps": "GPS: Entrance/Exit",
    "w3w": "W3W: Entrance/Exit",
    "information": "Information",
    "email": "Site Email",
    "number": "Site Phone Number",
    "Categories": "Site Category(s)",
    "times": "Opening Times",
    "fees": "Admission Fees",
    "access": "Accessability",
    "text": "Text Narrative",
    "text-header": "Header",
    "text-content": "Content"
  }
}

这样，您实际上可以根据给定的密钥访问每个标签。因此，如果您这样做：

import labelData from './labels.json'
const labels = labelData.Labels

然后，您可以使用labels.siteAdd或labels.information等访问标签。

这是code sandbox，显示了此代码的运行情况。

另外，如果您可以控制编写labels.json文件，我将向您提出以下建议，因为您可能会发现它将使您的生活更轻松：< / p>

请保持一致，如何命名密钥。我注意到您有information，但是您也有Categories-为什么一个大写而另一个大写呢？只是为了使自己免受可能的拼写错误或无法记住自己是否大写，请坚持使用一个或另一个并保持一致。
由于您知道要使用类似labels.information的标签来访问标签，因此请勿在键中使用连字符（例如在text-header中）。您会发现自己不能使用labels.text-header，而需要使用labels['text-header']。

在JSON中用JSON填充<label>吗？

2 个答案:

labels.json