Get a specific value from a JSON object

Question

Get a specific value from a JSON object

Within my Calendar, there is a code snippet that includes an Object and JSON data. This JSON object contains various properties such as

   [{"Date":"17-3-2015","Event":"Test drive","Participants":"John, George","Description":"Testing a new F30"},
    {"Date":"17-3-2015","Event":"Football match","Participants":"FCSM vs FCKK","Description":"New season start"},
    {"Date":"25-3-2015","Event":"Jane's Birthday","Participants":"Jane, John, Richard, Alice","Description":"Celebration with my friends"}]

The data is stored in localStorage, so I retrieved it using this code:

var existEvents = JSON.parse(localStorage.getItem('events'));
for(i=0; i<existEvents.length; i++) {
    var item = localStorage.getItem(localStorage.key(i));
    console.log(item);
};

existEvents holds all the new events from my Calendar

console.log(item); displays the data mentioned above.

My goal is to extract every Date value (= key) from the data. I tried using

 item.Date

believing it would work, but unfortunately, it doesn't. I also attempted

item[0].value

I experimented after reviewing this question + answers Access / process (nested) objects, arrays or JSON

What am I missing here? Any assistance is appreciated!

javascript json local-storage

Answer 1

Answer №1

An effective method to utilize the Array.ForEach() function is by employing it to iterate over objects with the value as the primary parameter and the key (if applicable) as the secondary parameter. In the provided example, each iteration of the foreach loop processes one object from the array.

The object being processed contains a key labeled Date, which can be accessed using obj.key. It is advisable to always verify the existence of a key before accessing it by utilizing .hasOwnProperty.

Additionally, you have the option to use forEach to traverse through the keys of the object, enabling access to obj/key. For instance, iterating over each obj within the array will output

obj => 17-3-2015 | key => Date

...etc.

var x =  [{"Date":"17-3-2015","Event":"Test drive","Participants":"John, George","Description":"Testing a new F30"},
        {"Date":"17-3-2015","Event":"Football match","Participants":"FCSM vs FCKK","Description":"New season start"},
        {"Date":"25-3-2015","Event":"Jane's Birthday","Participants":"Jane, John, Richard, Alice","Description":"Celebration with my friends"}];

x.forEach(function(obj,key){console.log(obj.Date) });

Here is an example of how your code could look:

JSON.parse(localStorage.getItem('events')).forEach(function(obj,key){console.log(obj.Date) });

Answer 2

An effective method to utilize the Array.ForEach() function is by employing it to iterate over objects with the value as the primary parameter and the key (if applicable) as the secondary parameter. In the provided example, each iteration of the foreach loop processes one object from the array.

The object being processed contains a key labeled Date, which can be accessed using obj.key. It is advisable to always verify the existence of a key before accessing it by utilizing .hasOwnProperty.

Additionally, you have the option to use forEach to traverse through the keys of the object, enabling access to obj/key. For instance, iterating over each obj within the array will output

obj => 17-3-2015 | key => Date

...etc.

var x =  [{"Date":"17-3-2015","Event":"Test drive","Participants":"John, George","Description":"Testing a new F30"},
        {"Date":"17-3-2015","Event":"Football match","Participants":"FCSM vs FCKK","Description":"New season start"},
        {"Date":"25-3-2015","Event":"Jane's Birthday","Participants":"Jane, John, Richard, Alice","Description":"Celebration with my friends"}];

x.forEach(function(obj,key){console.log(obj.Date) });

Here is an example of how your code could look:

JSON.parse(localStorage.getItem('events')).forEach(function(obj,key){console.log(obj.Date) });

Answer 3

Answer №2

Avoid accessing localstorage multiple times within a loop when you have already stored all the necessary data in the 'existEvents' variable.

var existEvents = JSON.parse(localStorage.getItem('events'));
for(i=0; i<existEvents.length; i++) {
    var item = existEvents[i];
    console.log(item);
};

Answer 4

Avoid accessing localstorage multiple times within a loop when you have already stored all the necessary data in the 'existEvents' variable.

var existEvents = JSON.parse(localStorage.getItem('events'));
for(i=0; i<existEvents.length; i++) {
    var item = existEvents[i];
    console.log(item);
};

Answer 5

Answer №3

When it comes to HTML5 LocalStorage, it serves as a key-value storage system where the getItem function allows you to retrieve specific items. For example,

localStorage.getItem("somekey")

will return the value associated with the key somekey. In the code snippet provided, the data stored in the localStorage is a String formatted in JSON notation. By using JSON.parse(), you can convert this JSON string back into an array.

var existEvents = JSON.parse(localStorage.getItem('events'));
for (var i = 0; i < existEvents.length; i++) {
    var item = existEvents[i];
    console.log(item);
};

Since existEvents now contains an Array object, you can interact with it like any regular array. Once you have retrieved and parsed it from localStorage, there's no need to keep accessing localStorage.getItem.

Answer 6

When it comes to HTML5 LocalStorage, it serves as a key-value storage system where the getItem function allows you to retrieve specific items. For example,

localStorage.getItem("somekey")

will return the value associated with the key somekey. In the code snippet provided, the data stored in the localStorage is a String formatted in JSON notation. By using JSON.parse(), you can convert this JSON string back into an array.

var existEvents = JSON.parse(localStorage.getItem('events'));
for (var i = 0; i < existEvents.length; i++) {
    var item = existEvents[i];
    console.log(item);
};

Since existEvents now contains an Array object, you can interact with it like any regular array. Once you have retrieved and parsed it from localStorage, there's no need to keep accessing localStorage.getItem.

Get a specific value from a JSON object

Answer №1

Answer №2

Answer №3

Similar questions

Managing JavaScript expiration time in API responses

Injecting Ajax-loaded content into an HTML modal

Problem encountered when attempting to return data received from database queries executed within a loop

Ways to alter the div post user authentication

Implementing SVG in NextJS 13 with custom app directory: A step-by-step guide

How to transfer the application version from package.json to a different non-JSON file in Angular and node.js

Adding a collection of items to an array in preparation for organizing

APNS functionality is supported by APN providers, but it is not compatible with NodeJS in a production

How can I override the default success_url and redirect to a custom page in Stripe Checkout?

What factors determine when Angular automatically triggers a setTimeout function compared to another?

Using react hooks, I am refreshing the product image by replacing it with the thumbnail image

Retrieve the jsonb value from a json structure that includes a json array in PostgreSQL

Exploring the World of Background Processes in Meteor

"Looking for a way to create a new line in my particular situation. Any tips

dismiss facial recognition event

What might be the reason for the misaligned positioning of the ThreeJS canvas when the browser window is resized?

When incorporating <Suspense> in Next.js, the button's interaction was unexpectedly lost

Converting Cookies to Numeric Values in JavaScript: A Step-by-Step Guide

Increasing the top padding of a resized iframe thanks to iframe-resizer

What steps do I need to follow in order to set up webpack.config.js to convert my HTML file to JS in a Reactjs application