CODEWITHSUNDEEP
javascriptjsontitaniumappcelerator
Sandeep Kumar
Sandeep Kumar

Reputation: 93

append json key value pair to a .json file Titanium

I have a .json file named wordsAndMeaning.json

{
    "words" : [
        {   
            "name" : "Apple",
            "meaning" : "A fruit"
        },
        {
            "name" : "Truck",
            "meaning" : "A heavy vehicle"
        },
        {
            "name" : "Zebra",
            "meaning" : "An animal"
        },
        {
            "name" : "Rock",
            "meaning" : "A music Genre"
        }
    ]
}

I have two textfields in my window that takes the name and the meaning of the name and a submit button.

What I want to do is after I fill in the textFields and click on Submit(i.e addEventListener), i want the entered data to be appended as new key-value pair to the above wordsAndMeanings.json file.

wordsandMeanings.json file exists in the resourcesDirectory, and I am using fileSystem to implement this.

I am new to JSON concept. so detailed explanation with code will be appreciated. I am implementing this task in Titanium.

I'll put my entire app.js code below

var window = Ti.UI.createWindow();

var view1 = Titanium.UI.createView({
    backgroundcolor:'21DCEE'
});
var view2 = Titanium.UI.createView({});

var textName = Titanium.UI.createTextField({
    top:100,
    left:50,
    height:50,
    width:150,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    hintText:'Enter the word'
});

var textMeaning = Titanium.UI.createTextField({
    top: 200,
    left:50,
    width:150,
    height:50,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    hintText:'Enter its meaning'
});

var submit = Titanium.UI.createButton({
    top:300,
    left:100,
    title:'Submit'
});

var tableView = Ti.UI.createTableView();
var tableData = [];
var fileName = 'wordsAndMeanings.json';
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, fileName); 
var preParseData = file.read();
var response = JSON.parse(preParseData);
Ti.API.info(response.words.length);
for(var i = 0; i < response.words.length ; i++){
    word = response.words[i];
    row = Ti.UI.createTableViewRow({
        height : '60dp'
    });
    nameLabel = Ti.UI.createLabel({
        text: word.name,
        font: { fontSize:'24dp', fontWeight:'bold'},
        height:'auto',
        left:'10dp',
        color:'#000',
        touchEnabled : false
    });
    row.add(nameLabel);
    tableData.push(row);
    tableView.setData(tableData);
}

var add = Titanium.UI.createButton({
    title: 'Add',
    top: 150,
    left: 50
});

add.addEventListener('click',function(e){
    window2 = Titanium.UI.createWindow({
        backgroundColor:'8FD2ED'
    });

    submit.addEventListener('click', function(e){
        //response.words.push({"name" : "abc", "meaning" : "alphabets"});
        //Ti.API.info(typeof(textName.value));
        //var one = JSON.parse(textName.value);
        //Ti.API.info(one);
        var obj = eval("(textName.value)");
        Ti.API.info(obj);
        //var file2 = Titanium.FileSystem.getFile(Titanium.FileSystem.resourcesDirectory,'wordsAndMeanings.json');
        //file2.write()
    });


    window2.open();
    window2.add(view2);
    view2.add(textName);
    view2.add(textMeaning);
    view2.add(submit);
});
window.open();
window.add(view1);
view1.add(tableView);
view1.add(add);

Upvotes: 2

Views: 1558

Answers (3)

daniula
daniula

Reputation: 7028

Using Titanium.App.Properties() instead of file system would be much better. You can easily store and retrieve whole object using:

  • Ti.App.Properties.getObject('propertyName', defaultValue); - Second parameter is returned when property doesn't exist.
  • Ti.App.Properties.setObject('propertyName', value);

Upvotes: 0

Olivier
Olivier

Reputation: 921

After reading the docs @Anand linked to, you'll see that you cannot write in the resourcesDirectory. You can save your new file in the applicationDataDirectory, and load from that file afterward.

Since you are already parsing your data in a dictionary (var response = JSON.parse(preParseData);), I would append your new data exactly the way you have done it in the submit eventListener (//response.words.push({"name" : "abc", "meaning" : "alphabets"});), and at the end, stringify the response dictionary to save it.

1) So read and parse the json:

var fileName = 'wordsAndMeanings.json';
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, fileName); 
var preParseData = file.read().text; // file.read() will return the blob. file.read().text is what you want
var response = JSON.parse(preParseData);

2) Get fields data on submit click and append data

submit.addEventListener(click, function(e) {
 var userTextMeaning = textMeaning.value; // Read value property of both fields
 var userTextName = textName.value;
 response.words.push({"name" : userTextName, "meaning" : userTextMeaning}); // Push the new data to response list
}

3) Stringify and save in applicationDataDirectory

var fileName = 'wordsAndMeanings.json';
var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, fileName); 
var json = JSON.stringify(response);
file.write(json)

Upvotes: 1

Anand
Anand

Reputation: 5332

You can use write method to write to a file in Titanium. You should understand about Titanium File System before doing this.

Also you should change the statement var obj = eval("(textName.value)"); to var obj = eval("(" + textName.value + ")");.

Upvotes: 0

Related Questions