如何從React JS（axios）中的json中提取一些數據？

Question

我是ReactJS和axios新手。

如果密鑰是數字（例如0、1、2 ...），我想迭代並提取json數據，但不知道如何編寫這段代碼。 （因為服務器動態提供json，所以我們不知道它將有多少個元素）

現在，我可以使用鍵= 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'] ， response.data ['1']和response.data ['2']

您可以使用for..in遍歷對象。

您的數據模型（除了對“ getAllDroneStatus（）”的引用之外）表明，數組可能更有用。

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

然后，您可以迭代，減少，過濾等。

Answer 2

您從服務器獲得的響應是​​一個對象，您應該做的是遍歷該對象，然后在我假設您只需要名稱的狀態下更新數據

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