Skip to content Skip to sidebar Skip to footer

Create Json File React Native And Load In The Db

I have a question. I create an app using react native that comunicate with external devices using bluetooth. When the app is connected with the two external devices, I recover a f

Solution 1:

If you don't need to query your data, then you could simply use AsyncStorage.

https://github.com/react-native-community/async-storage

See the code below.

First snippet

This is a basic module, which exports 2 methods, 1 to save data, another to load data. Data saved using this module is persisted, i.e. written to disk.

Note that all data saved is passed through JSON.stringify, and then parsed on the way back out. This facilitates saving non-primitive types, such as objects.

importAsyncStoragefrom'@react-native-community/async-storage';

/*
* @function saveDeviceData This will write the data to disk, with a given key, this * could be written to a SQLite DB file, a flat file, AsyncStorage is an abstract 
* wrapper around this. 
* @param key {String} Key identifier
* @param data {any} Data to save for the given key
*/exportconst saveDeviceData = async (key, data) => {
    try {

        awaitAsyncStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.log(`Error saving data for key ${key}`, data);
      throw e;
    }
};


/*
* @param key {String} Key identifier for data to load
*/exportconst loadDeviceData = async (key) => {
    try {

        returnJSON.parse(awaitAsyncStorage.getItem(key);
    } catch (e) {
      console.log(`Error loading data for key ${key}`);
      throw e;
    }
};

Second snippet

This is a basic example of a component, it has 2 methods, 1 to load data, another to save data. The component renders 2 buttons, these buttons are bound to those 2 methods.

importReact, {Component} from"react";
import {saveDeviceData, loadDeviceData} from"./the-module-example-above";

classAppextendsComponent {

    loadData = async () => {
        let data;
        try {
             data = awaitloadDeviceData("foo"); // example, this would return undefined
        } catch (e) {}

        console.log(data);
    };

    saveData = async () => {

        // This represents your data, this is just a placeholder example.const someJSON = [
             { field: 1},
             { field: 2},
             { field: 3}
            // Etc...
        ];

        try {
            awaitsaveDeviceData("foo", someJSON);
        } catch (e) {}
    };

    render () {

        return (
            <><ButtononPress={this.saveData}title="Save data"/><ButtononPress={this.loadData}title="Load data"/></>
        );
    }
}

If you set this code up in a project, and rendered the component in snippet 2, click the buttons and observe whatever console is provided by your debugging environment.

If you need to query the data, then you're best bet in my opinion is using SQLite, you could use another library for that, e.g. https://github.com/craftzdog/react-native-sqlite-2

Finally, if you mean you need to store that data in a remote database, e.g. hosted on your own server(s) / with your chosen cloud provider, then you'd need to look at making a http POST/PUT request to post that data up to your API that handles that. If that is your question, it's by-far too unclear though. IF it is, then look at using fetch (see link below) to send your data to your API.

https://facebook.github.io/react-native/docs/network

Disclaimer: The code above is untested!

Good luck!

Post a Comment for "Create Json File React Native And Load In The Db"