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

您的回复是对象而不是数组。

您无法使用数组索引访问对象。

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

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

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

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

然后你可以迭代，减少，过滤等等。

Answer 2

您从服务器获得的响应是一个对象，您应该做的是遍历Object然后更新数据，我认为您只需要名称

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);
}

如何从JS（axios）中的json中提取一些数据？

2 个答案: