如何在 React JS (axios) 中从 json 中提取一些数据？

Question

我是 ReactJS 和 axios 新手。

如果键是数字（如 0、1、2....），我想迭代并提取 json 数据 并且不知道我该如何编写这段代码。 （因为服务器动态提供json，我们不知道它会有多少元素）

现在我可以提取 key = 0 的数据（假设存在这个元素）

class ContentBody extends Component {
    constructor(props) {
        super(props);
        this.state = {
            jdata: []
        }
    }
    componentDidMount() {
        var self = this;
        // read data periodically
        setInterval(function() {
            axios.get(URL)
                .then(function(response) {
                    self.setState({
                        jdata: response.data[0].Name
                    });
                })
                .catch(function(e) {
                    console.log("ERROR ", e);
                })
        }, 1000);
    }
}

// below is json data from the server
{
  "0": {
    "Assigned": false, 
    "Name": "BebopDrone-Test001.", 
    "droneID": 0
  }, 
  "1": {
    "Assigned": false, 
    "Name": "BebopDrone-B046836", 
    "droneID": 1
  }, 
  "2": {
    "Assigned": false, 
    "Name": "BebopDrone-Test002.", 
    "droneID": 2
  }, 
  "function": "getAllDroneStatus()"
}


// my pseudo code might be 
for(int i = 0; i < jsonObject.size(); i++){
    if(key is number){
        extract corresponding value
    }
 }

Answer 1

你从服务器得到的响应是一个对象，你应该做的是循环这个对象，然后在我假设你只需要名字的状态下更新数据

componentDidMount() {
    var self = this;
    // read data periodically
    setInterval(function() {
        axios.get(URL)
            .then(function(response) {
                var names=[];
                Object.keys(response.data).forEach(function(data) {
                     names.push(data.Name);
                })
                self.setState({
                    jdata: names
                });
            })
            .catch(function(e) {
                console.log("ERROR ", e);
            })
    }, 1000);
} 

Answer 2

您的响应是对象而不是数组。

您不能使用数组索引访问对象。

假设 response.data 是您的 json 的主体，您应该像这样访问您的对象属性：response.data['0'], response .data['1'], response.data['2']

您可以使用for..in 迭代对象。

您的数据模型（除了对“getAllDroneStatus()”的引用）表明数组可能更有用。

{
   "jdata" : [
      {
         "Assigned": false, 
         "Name": "BebopDrone-Test001.", 
         "droneID": 0
      }
    // ... 
    ]
}

然后就可以进行迭代、归约、过滤等操作了。