Retrieve information from a JSON string

Question

Retrieve information from a JSON string

My function is not returning the title of the interval, it keeps returning undefined.

Function

filterByCategories () {
      return _.orderBy(this.meetups.filter(item => {
        console.log('title: ' + JSON.stringify(item.interval.title, null, 4))

JSON (content of this.meetups):

[
    {
        "id": "-12345",
        "title": "abcds",
        "description": "Hello3",
        "date": "2023-12-29",
        "location": {
            "color": "grey darken-2",
            "icon": "not_interested",
            "id": "none",
            "title": ""
        },
        "creatorId": "abcd1234",
        "time": "24:00",
        "color": {
            "color": "red darken-2",
            "id": "06",
            "title": "Ret"
        },
        "interval": {
            "color": "green darken-2",
            "icon": "local_activity",
            "title": "Weekly",
            "value": 3
        },
        "statusType": false,
        "pause": false,
        "pushNotification": false
    }
]

What is the correct method to access the title of the interval object?

javascript json vue.js vuejs2

Answer 1

Answer №1

After successfully parsing the JSON, accessing it based on its property name becomes straightforward. It's important to note that the data is stored within an array, meaning there will be multiple instances of .interval.title. To handle this, using a for loop is recommended unless you are targeting a specific index. In the case of targeting a specific index, you can skip the for loop and directly retrieve it using json[0].interval.name (with 0 representing the desired index).

const json = [
    {
        "id": "-12345",
        "title": "abcds",
        "description": "Hello3",
        "date": "2023-12-29",
        "location": {
            "color": "grey darken-2",
            "icon": "not_interested",
            "id": "none",
            "title": ""
        },
        "creatorId": "abcd1234",
        "time": "24:00",
        "color": {
            "color": "red darken-2",
            "id": "06",
            "title": "Ret"
        },
        "interval": {
            "color": "green darken-2",
            "icon": "local_activity",
            "title": "Weekly",
            "value": 3
        },
        "statusType": false,
        "pause": false,
        "pushNotification": false
    }
];

for (let i = 0; i < json.length; i++) {
  const meetup = json[i];
  console.log(meetup.interval.title);
}

Answer 2

After successfully parsing the JSON, accessing it based on its property name becomes straightforward. It's important to note that the data is stored within an array, meaning there will be multiple instances of .interval.title. To handle this, using a for loop is recommended unless you are targeting a specific index. In the case of targeting a specific index, you can skip the for loop and directly retrieve it using json[0].interval.name (with 0 representing the desired index).

const json = [
    {
        "id": "-12345",
        "title": "abcds",
        "description": "Hello3",
        "date": "2023-12-29",
        "location": {
            "color": "grey darken-2",
            "icon": "not_interested",
            "id": "none",
            "title": ""
        },
        "creatorId": "abcd1234",
        "time": "24:00",
        "color": {
            "color": "red darken-2",
            "id": "06",
            "title": "Ret"
        },
        "interval": {
            "color": "green darken-2",
            "icon": "local_activity",
            "title": "Weekly",
            "value": 3
        },
        "statusType": false,
        "pause": false,
        "pushNotification": false
    }
];

for (let i = 0; i < json.length; i++) {
  const meetup = json[i];
  console.log(meetup.interval.title);
}

Answer 3

Answer №2

If you have multiple objects in the variable meetups, you can use Array.map to loop through the array of objects and retrieve the value of the title property inside the interval.

this.meetups.map(obj => {
  console.log(`title: ${obj['interval']['title']}`);
});

Alternatively, if there is only one object in the variable meetups, you can directly access the value of the title property within the interval.

this.meetups[0]['interval']['title']

Example:

const meetups =[{"id":"-12345","title":"abcds","description":"Hello3","date":"2023-12-29","location":{"color":"grey darken-2","icon":"not_interested","id":"none","title":""},"creatorId":"abcd1234","time":"24:00","color":{"color":"red darken-2","id":"06","title":"Ret"},"interval":{"color":"green darken-2","icon":"local_activity","title":"Weekly","value":3},"statusType":false,"pause":false,"pushNotification":false}];

meetups.map(obj => {
  console.log(`title: ${obj['interval']['title']}`);
});

Regarding the code you provided in your question, the use of Array.filter() may not be necessary as it creates a new array based on the callback function provided within filter(). Additionally, stringifying the array using JSON.stringify() converts the array into a string, which may not be ideal for accessing values within the array of objects.

Answer 4

If you have multiple objects in the variable meetups, you can use Array.map to loop through the array of objects and retrieve the value of the title property inside the interval.

this.meetups.map(obj => {
  console.log(`title: ${obj['interval']['title']}`);
});

Alternatively, if there is only one object in the variable meetups, you can directly access the value of the title property within the interval.

this.meetups[0]['interval']['title']

Example:

const meetups =[{"id":"-12345","title":"abcds","description":"Hello3","date":"2023-12-29","location":{"color":"grey darken-2","icon":"not_interested","id":"none","title":""},"creatorId":"abcd1234","time":"24:00","color":{"color":"red darken-2","id":"06","title":"Ret"},"interval":{"color":"green darken-2","icon":"local_activity","title":"Weekly","value":3},"statusType":false,"pause":false,"pushNotification":false}];

meetups.map(obj => {
  console.log(`title: ${obj['interval']['title']}`);
});

Regarding the code you provided in your question, the use of Array.filter() may not be necessary as it creates a new array based on the callback function provided within filter(). Additionally, stringifying the array using JSON.stringify() converts the array into a string, which may not be ideal for accessing values within the array of objects.

Retrieve information from a JSON string

Answer №1

Answer №2

Similar questions

Performing a JSON POST Request: Steps for sending a POST request with JSON data format

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

I'm attempting to create a button that changes to a bold red color when the condition is met

Automating the movement of a slider input gradually throughout a specified duration

Displaying the content of the log file within a textarea

List of Nodes with five links

Deleting images from Firestore using a Vue.js componentReady to learn how to remove images

React - CSS Transition resembling a flip of a book page

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

Modify only the visual appearance of a specific element that incorporates the imported style?

Confirming the browser exit on IE9

Discovering the automatically generated routes in Nuxtjs

Troubleshooting resizing images in React using Material UI's useStyles

In Nuxt 3, #imports need to be converted into actual imports for proper functionality

Is there a way to replicate a DIV and its contents in ASP.NET using C#?

The ion-slide-box does not function properly the first time the HTML page is loaded

Restoring a Byte array from a JSON document

Passing an array list back to the parent component in ag-grid(Vue) - A step-by-step guide

Ways to optimize memory usage and eliminate Vue reactivity

TinyMCE: Tips for adding and highlighting text in your content!