How to populate datasource for listview using api response in react native?

Question

My Api returns me a response exactly like the const "devices" defined below. If i don't call the api, i am getting the listview properly populated with single row of data, but if i populate the datasource using Api response, i am getting empty 160 rows.

Whats wrong with my setState?

    const devices = [
        {
            "DeviceID": 4,
            "DeviceCode": "ODPRC-HB-4",
            "ContactName": "Sudhir",
            "GPS_Lat_Long": "15.396863, 74.012382",
            "DeviceName": "Sudhirs Device"
        }
    ];

    class Devices extends Component {

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2,
        });
        this.state = {
            dataSource: ds.cloneWithRows(devices)
        }
    }
    componentDidMount() {
        this.getDeviceList();
    }

    getDeviceList() {
        let request = new Request('https://myapiWithQueryString.com');
        request.addHeaders({ 'Content-Type': 'application/json'});  
        RNETWORK.get(request, () => {
        }, (response) => {
            if (response.getError()) {
                alert(response.getError().message);
            } else {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(response.getBodyString())

                });
                alert(response.getBodyString());
            }
        });
    }

What is the exact value of response.getBodyString() ? An array or a string ? — stilllife
– stilllife, Commented Oct 20, 2017 at 15:08
exactly like this... [ { "DeviceID": 4, "DeviceCode": "ODPRC-HB-4", "ContactName": "Sudhir", "GPS_Lat_Long": "15.396863, 74.012382", "DeviceName": "Sudhirs Device" } ] — Veer3383
– Veer3383, Commented Oct 20, 2017 at 15:17
at the initial, there will be no data with devices, so how did u handle that? If you could share that will be very helpful — user7747472
– user7747472, Commented Jun 17, 2018 at 15:49

sebastianf182 · Accepted Answer · 2017-10-20 15:51:06Z

1

Try this:

dataSource: this.state.dataSource.cloneWithRows(JSON.parse(response.getB‌odyString()))

Note: I am assuming getBodyString actually returns something because I don't recall that method existing in the response interface.

edited Oct 20, 2017 at 15:51

answered Oct 20, 2017 at 15:36

sebastianf182

9,9783 gold badges38 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Veer3383 Over a year ago

this didnt work. btw i am using react-native-netclient library for making api calls. getBodyString() returns me the json which i have commented on my question

Veer3383 Over a year ago

It worked this way. Thank you buddy.. please update the answer . dataSource: this.state.dataSource.cloneWithRows(JSON.parse(response.getBodyString()))

sebastianf182 Over a year ago

Yeah, my bad. I actually meant to write that. Glad it worked!

Collectives™ on Stack Overflow

How to populate datasource for listview using api response in react native?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related