How to extract some data from json in react JS (axios)?

Question

I'm a ReactJS and axios newbie.

I want to iterate and extract json data if the key is number (like 0, 1, 2....) and don't know how can I write this piece of code. (because the server provide the json dynamically, and we don't know how many elements it will have)

Now I can extract the data with key = 0 (assume there exists this element)

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

You can use `for..in` loop to iterate in the object. https://stackoverflow.com/a/19323734/1619213 — Rishabh Mishra, Jul 14 '17 at 03:53

score 1 · Answer 1 · answered Jul 14 '17 at 03:57

Your response is an Object not an Array.

You can't access an object using array indexing.

Assuming response.data is the body of your json, you should access your object properties like this: response.data['0'], response.data['1'], response.data['2']

You can iterate over an object using for..in.

Your data model (aside from the reference to 'getAllDroneStatus()') suggests that an array might be more useful.

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

Then you can iterate, reduce, filter and so on.

Thanks. I will give it a try. – Wen Chen Jul 14 '17 at 04:00 — Wen Chen, Jul 14 '17 at 04:00

score 1 · Accepted Answer · answered Jul 14 '17 at 06:24

The response that you get from the server is an object, what you should do is loop over the Object and then update data in state where I assume you only need name

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

it's also a great way. Thanks! – Wen Chen Jul 14 '17 at 06:32 — Wen Chen, Jul 14 '17 at 06:32

How to extract some data from json in react JS (axios)?

2 Answers2