Unable to loop through data from SQLite call in React Native, Expo

Question

I'm currently making a call to an SQLite local database in my react native

Expo app like so:
    db.transaction(tx => {
      tx.executeSql('select * from dr_report_templates', [], (_, { rows }) => {
        const templateData = JSON.stringify(rows);
        this.setState({ options: templateData, isLoading: false }, () => console.log(this.state))
      });
    },
      error => {
        alert(error);
      },
      () => console.log('Loaded template settings')
    );

I'm returning the data and making it a JSON string with: JSON.stringify

Data appears like so:

Object {
  "isLoading": false,
  "options": "{\"_array\":[{\"id\":30,\"name\":\"SFR General\",\"description\":\"SFR1\"},{\"id\":31,\"name\":\"SFR Extended\",\"description\":\"SFR2\"},{\"id\":7790,\"name\":\"test_new_template\",\"description\":\"test_new_template\"},{\"id\":7792,\"name\":\"apart_1\",\"description\":\"apart_1\"},{\"id\":7793,\"name\":\"SFR\",\"description\":\"Single Family\"},{\"id\":7798,\"name\":\"Condo\",\"description\":\"Condo \"},{\"id\":7799,\"name\":\"Duplex\",\"description\":\"Duplex\"},{\"id\":7800,\"name\":\"Triplex \",\"description\":\"3\"},{\"id\":7801,\"name\":\"Apartments\",\"description\":\"Apartment complex\"},{\"id\":7802,\"name\":\"Commercial retail store \",\"description\":\"Storefront \"},{\"id\":7803,\"name\":\"5-10 unit\",\"description\":\"5\"},{\"id\":7804,\"name\":\"Commercial Industrial \",\"description\":\"Industrial \"},{\"id\":7805,\"name\":\"Industrial Property\",\"description\":\"RE\"}],\"length\":13}",
  "selected": "",
}

Attempting to get values for just the first array element like so:

this.state.options[0]

does not work. I'm obviously doing something wrong in the way that I'm doing this but can't figure out what. Any ideas?

EDIT: I had also ran the query with out JSON.Stringify. The data returned like so with this "t" in front of it. I've never hard this before and I couldn't loop through it so that's why I did a JSON.stringify.

t {
  "_array": Array [
    Object {
      "description": "SFR1",
      "id": 30,
      "name": "SFR General",
    },
    Object {
      "description": "SFR2",
      "id": 31,
      "name": "SFR Extended",
    },
    Object {
      "description": "test_new_template",
      "id": 7790,
      "name": "test_new_template",
    },
    Object {
      "description": "apart_1",
      "id": 7792,
      "name": "apart_1",
    },
    Object {
      "description": "Single Family",
      "id": 7793,
      "name": "SFR",
    },
    Object {
      "description": "Condo ",
      "id": 7798,
      "name": "Condo",
    },
    Object {
      "description": "Duplex",
      "id": 7799,
      "name": "Duplex",
    },
    Object {
      "description": "3",
      "id": 7800,
      "name": "Triplex ",
    },
    Object {
      "description": "Apartment complex",
      "id": 7801,
      "name": "Apartments",
    },
    Object {
      "description": "Storefront ",
      "id": 7802,
      "name": "Commercial retail store ",
    },
    Object {
      "description": "5",
      "id": 7803,
      "name": "5-10 unit",
    },
    Object {
      "description": "Industrial ",
      "id": 7804,
      "name": "Commercial Industrial ",
    },
    Object {
      "description": "RE",
      "id": 7805,
      "name": "Industrial Property",
    },
  ],
  "length": 13,
}

roel · Accepted Answer · 2019-05-17 02:21:11Z

1

this.setState({ options: templateData._array, isLoading: false });

or change how you destructure in 3rd parameter of executeSql to:

(_, { rows: { _array } }) => {
  const templateData = JSON.stringify(_array);
}

answered May 17, 2019 at 2:21

roel

1,66014 silver badges14 bronze badges

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

1 Comment

FabricioG Over a year ago

Based on hakiko's response we also removed JSON.stringify @roel

hakki · Accepted Answer · 2019-05-17 11:13:43Z

1

Why you're conveting it with JSON.stringify()? You can iterate over array or access it with array's key name.

NOTE: JSON.stringify() does not convert it to JSON. It converts to JSON string

The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing values if a replacer function is specified or optionally including only the specified properties if a replacer array is specified.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

You're actually converting your database response to string.

So Change

const templateData = JSON.stringify(rows);

to

const templateData = rows;

and use this array where you want.

answered May 17, 2019 at 11:13

hakki

1

2 Comments

FabricioG Over a year ago

I had tried that and it returned with this: t {}. I've added the data returned on top. I couldn't loop through it so that's why I had added the JSON.Stringify . any ideas why it does that? @hakiko

FabricioG Over a year ago

Your commented help thank you! Figured it out using answer below but removing JSON.stringify @hakiko

Collectives™ on Stack Overflow

Unable to loop through data from SQLite call in React Native, Expo

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related