DEV Community

loading...
Cover image for How to make CRUD operations in JSON

How to make CRUD operations in JSON

equiman profile image Camilo Martinez Updated on ・2 min read

Before starting with CRUD operations, recommend learn about:


CRUD operations are things that you going to make all your life as a programmer.

With JSON can use a clever data structure to avoid brute force search with for loops. Using the "character" name as "Primary Key".

Game of Thrones Example

Data

  var got = {
    "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"},
    "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"},
    "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"}
  }
Enter fullscreen mode Exit fullscreen mode

Add character (Create):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var characterObject = { "name": "Bella Ramsey", "gender": "Female", "house": "Mormonts" }; var character = "Lyanna"; got[character] = characterObject; console.log(got)

Find character (Read):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var character = "Tyrion"; // Or whatever var result = got[character]; console.log(result) console.log(result.name) console.log(result.gender) console.log(result.house)

Update character (Update):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var character = "Jon Snow"; got[character].house = "Targaryens" var result = got[character]; console.log(result)

Remove Character (Delete):

// hidden setup JavaScript code goes in this preamble area var got = { "Jon Snow": {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, "Daenerys": {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, "Tyrion": {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} } // Click [RUN] button to see result var character = "Tyrion"; delete got[character]; console.log(got)

Alternative Structure

Maybe it's a little good looking, but you need to deal with array of positions on CRUD operations.

// hidden setup JavaScript code goes in this preamble area //Data var got = { "index": { "Jon Snow": 0, "Daenerys": 1, "Tyrion": 2 }, "data": [ {"name": "Kit Harington", "gender": "Male", "house": "Starks"}, {"name": "Emilia Clarke", "gender": "Female", "house": "Targaryens"}, {"name": "Peter Dinklage", "gender": "Male", "house": "Lanisters"} ] } var character = "Daenerys"; var index = got.index[character]; var data = got.data[index]; console.log(data);

That’s All Folks!
Happy Coding 🖖

Buy me a cofee

Discussion (7)

Collapse
gdahboy profile image
gdahboy

hhh i like it really ... thank you

Collapse
diegonvs profile image
Diego Nascimento • Edited

Hey Camilo, instead of using delete, you could set the pointer to null. #perfTip :p

Collapse
equiman profile image
Camilo Martinez Author

Sorry I'm lost, could you please write the example code?

Collapse
diegonvs profile image
Diego Nascimento

On delete operation you can use got[character] = null; instead of delete got[character];. Take a look on jsperf.com/delete-vs-undefined-vs-...

Thread Thread
equiman profile image
Camilo Martinez Author • Edited

Not works as CRU*D* operation, because the 'character' is not removed, just the values are replaced by null.

I tested changing on Delete script. When run the script show: Tyrion: null.

Can be used if you want leave the character, but remove his data.

Nice link BTW. I did not know about the performance comparison between null and delete

Some comments have been hidden by the post's author - find out more

Forem Open with the Forem app