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

Question

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

Answer 1

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,
  }));

Answer 2

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,
       
      }));