Asp.net web api 如何从多维对象的本地json文件中获取数据

如何从react中的本地json文件获取数据

下面是示例数据

{
  "data": {
    "Table": [{
      "id": "1001",
      "first_name": "Alez"
    },
    {
      "id": "1002",
        "first_name": "Baro"
    }],

  }
}

---

因此，让我们首先从json文件中导出它以进行本地测试，但是假设API是可访问的，则不需要将其写入文件：）但现在：

export const MyData = {
  "data": {
    "Table": [{
      "id": "1001",
      "first_name": "Alez"
    },
    {
      "id": "1002",
        "first_name": "Baro"
    }],
  }
}

将其从“某个路径”导入到您的文件

import{MyData}

然后您应该能够像这样迭代它：

function renderemployeeTable(results) {
  const { data } = MyData

  return (
      <div class="container-fluid" class="row" fluid={true}>
          {
            data.Table.map(results =>
              <div class="col-sm-3" key={results.Employee_Number}>
                <div class="card our-team" >
                  <div class="card-body">
                    <p class="card-text">{results.first_name}</p>
                    <p class="card-text">{results.last_name}</p>
                  </div>
                </div>
                <a href="#" class="btn btn-primary">Detail</a>
              </div>
            )
          }
      </div>
  );
}

在您发出该请求并将其设置为状态的组件did mount中，您应该在等待数据时将

isLoading

移动到

组件did mount

。。。您可以执行以下操作（超松散编码，因此如果没有一些语法更正，它可能无法运行）

构造函数（道具）{
超级（道具）；
this.state={
结果：[]，
isLoading:空
};
}
组件安装（）{
this.setState（{isLoading:true}）
取（'http://web.api.services/api/v2/tultula/employees/all', {
方法：“GET”，
标题：{
“api密钥”：“xxx xxx xxx”
}
})
.then（results=>results.json（））
.然后（数据=>this.setState(
{ 
孤岛加载：false，
结果：数据
})
);
}
函数renderemployeeTable（）{
const{isLoading，results}=this.state
常量{Table:Table}=results
返回(
{孤岛加载
?  
:  
{
表.map（结果=>
{results.first_name}
{results.last_name}
)
}
}
);
}
render（）{
返回(
-
{renderemployeeTable（）}
);
}

这是一个总体思路。1） 基本上，您首先在componentDidMount中设置了

isLoading

，因此，当页面获取时，您将看到加载程序（idk，如果您有我制作的组件） 2） 一旦数据被提取并设置为

状态

并将isLoading切换为false。。。设置状态将触发重新渲染并显示包含数据的组件，因为isLoading现在为false。当然，您应该做一些检查，并制定一个计划，如果数据没有返回，您会遇到服务器错误或其他问题。如果

表

存在并且在关闭加载程序之前有一个长度，您还可以使用条件检查（例如，您可以使用错误消息将其关闭-关于如何处理意外事件的许多选项）

---

编辑：回顾这一点，您可能需要将有条件的

isLoading

和

结果检查放入渲染中，以便在状态更新后更新（重新渲染）；）

不是一个函数，因为您可能没有从该.json文件导出任何内容，

import Something

需要默认的导出和

import{Something}

并没有，所以这可能也是一个问题……@HolyMoly json数据的原始源来自API，当格式为

{“data”：{“Table”：[{“id”：“1001”，“first_name”：“Alez”}，{“id”：“1002”，“first_name”：“Baro”}，}时提取数据是一个噩梦

当表单数据是这样时，我就可以让它工作了[{“id”：1，“first_name”：“Alex”，“last_name”：“tora”}，{“id”：1，“first_name”：“Baro”，“last_name”：“tora”}]我正在使用本地副本进行测试以确定问题，我清楚了吗？您正在发出API请求以获取此数据，并在需要时将其解析为json？然后将其写入存储在前端的.json文件？是的，现在我将其存储为response.json文件，但最初我试图直接从API url提取数据，我在这里有代码codepile.net/pile/gE3kx1Eo。这有意义吗？是的我只是给你写出来，但是我说了上面的一些评论，你需要

results.Table.map

lol:）这也可以清理一下，但为了保持简单，我没有：）非常感谢你，但是我如何才能将其转换为从url获取？你实际上非常接近你应该工作的内容，但你不需要在底部调用，给我一秒钟，我会更新我的答案…更新，这是一个指导原则-它可能不会按原样运行，因为我不能在本地运行它，而且我经常犯语法错误。如果我回答了你关于迭代

表的原始问题（我在你的问题的评论中这样做了；）lol。。。然后请将答案标记为已回答。。。。这是额外的学分！哈哈
async populateemployeeData() {
    const response = await fetch('table');
    const data = await response.json();
    this.setState({ results: data, loading: false });
}

constructor(props) {
  super(props);
  this.state = { 
    results: [],
    isLoading: null 
  };
}

componentDidMount () {
  this.setState({isLoading: true})

  fetch('http://web.api.services/api/v2/tultula/employees/all', {
    method: 'GET',
    headers: {
        'api-key': 'xxx-xxx-xxx'  
    }
    })
    .then(results => results.json())
    .then(data => this.setState(
      { 
        isLoading: false, 
        results: data 
      })
    );
}


function renderemployeeTable() {
  const { isLoading, results } = this.state
  const {Table: table} = results
  return (
    { isLoading 
      ? <SomeLoadingComponetThingie /> 
      :  <div class="container-fluid" class="row" fluid={true}>
          {
            table.map(results =>
              <div class="col-sm-3" key={results.Employee_Number}>
                <div class="card our-team" >
                  <div class="card-body">
                    <p class="card-text">{results.first_name}</p>
                    <p class="card-text">{results.last_name}</p>
                  </div>
                </div>
                <a href="#" class="btn btn-primary">Detail</a>
              </div>
            )
          }
          </div>
    }
  );
}

render() {
  return (
      <div>
        <h1 id="tabelLabel" >-</h1>
        {renderemployeeTable()}
      </div>
  );

}