Question 321304 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Problem reading Json response . "Cannot read properties of undefined (reading 'value')"

Hi’ I’m getting data from a Json service with data with FETCH function in reactJs. when I obtain the array save the answer in a variable:

      const resp = await fetch(url);   
      const { contenidos = [] } = await resp.json();

The Json is ( have 500 items):

[
    {
        "custom_fields": {
            "v2_titulo": {
                "id": 1561385,
                "value": "Algun titulo acá"
            },
            "v2_extracto": {
                "id": 1561386,
                "value": "extracto de la noticia acá"
            },
            "v2_descripcion": {
                "id": 1561387,
                "value": "descripción de la noticia acá"
            },
            "v2_vigencia": {
                "id": 1561388,
                "value": "Vigencia"
            }            
        },
        "id": 12388,
        "uuid": "7fb8560c-7a18-481f-abfa-a0e331255f81",
        "created_at": "2023-07-21T09:33:32.000-04:00",
        "updated_at": "2023-07-21T09:33:32.000-04:00",
        "published_at": "2024-01-15T10:13:33.000-03:00",
        "covers": [
            "https://noticias/covernoticia.jpg",
            "https://noticias/logonoticia.jpg"
        ],
        "tags": [
            "actualidad",
            "providencia",
            "santiago"
        ],
        "category": "salud",
        "site_id": 1,
        "video_url": ""
    },
    {
        "custom_fields": {
            "v2_titulo": {
                "id": 1561385,
                "value": "Algun titulo acá 2"
            },
            "v2_extracto": {
                "id": 1561386,
                "value": "extracto de la noticia acá 2"
            },
            "v2_descripcion": {
                "id": 1561387,
                "value": "descripción de la noticia acá 2"
            },
            "v2_vigencia": {
                "id": 1561388,
                "value": "Vigencia 2"
            }            
        },
        "id": 12388,
        "uuid": "7fb8560c-7a18-481f-abfa-a0e331255f81",
        "created_at": "2023-07-21T09:33:32.000-04:00",
        "updated_at": "2023-07-21T09:33:32.000-04:00",
        "published_at": "2024-01-15T10:13:33.000-03:00",
        "covers": [
            "https://noticias/covernoticia.jpg",
            "https://noticias/logonoticia.jpg"
        ],
        "tags": [
            "actualidad",
            "huechuraba",
            "santiago"
        ],
        "category": "salud",
        "site_id": 1,
        "video_url": ""
    }
   
]

I’m mapping like this:

  const noticias =  contenidos.map( item => ({
        id: item.id,
        banner: item.covers[0],
        logo: item.covers[1],
        title: item.custom_fields.v2_titulo.value,
        category: item.category,
       
      }));

it’s works with id, covers, and category, but when I tried to enter "v2_titulo.value" it’s doesn’t work and throws :

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘value’)
at getBCHNews.js?t=1705328829877:17:45
at Array.map ()
at getBCHNews (getBCHNews.js?t=1705328829877:12:36)
at async getNews (useFetchNews.js?t=1705328829877:10:29)

can you help me please!

I need to reed v2_titulo.Value

Tags:

2

Answers


  1. 0

    Hmmm, your code worked for me without issue. I’m assuming it’s similar to what Davi is saying in that some of the titles are null or missing. Another way you can write the map to set the title to indicate that no title was found when it encounters a null or undefined value for v2_titulo, like so:

      const noticias =  contenidos.map( item => ({
    id: item.id,
    banner: item.covers[0],
    logo: item.covers[1],
    title: item.custom_fields.v2_titulo.value ? item.custom_fields.v2_titulo.value : "No title found" // or some other value that makes sense to you like `null`,
    category: item.category,
  }));
    Login or Signup to reply.
  2. 0

    Maybe in the response, some of the result has no ‘v2_titulo’ in it. So when you are trying to access ‘v2_titulo’ which is (undefined) you are getting error. In that case you can use ‘Optional chaining (?)’ while while accessing the ‘v2_titulo’ value. If the ‘v2_titulo’ is somehow missing or (undefined) it will ignore it.

      const noticias =  contenidos.map( item => ({
        id: item.id,
        banner: item.covers[0],
        logo: item.covers[1],
        title: item.custom_fields.v2_titulo?.value,
        category: item.category,
       
      }));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search