Why are my array elements being reported as undefined?

Question

I am trying to build a simple website. Simply use vuejs to display data after retrieving. But then I encountered a problem, specifically as follows:

I have retrieved and manipulated data. All data after processing is put into an array. After that, I can still display the result array, but when accessing each element in that array, the result is 'undefined'. I do not know why.

What have I tried

Manipulation via an intermediate variable. The result is still inaccessible to the elements in both arrays.
Change the order of console commands.

My code

<script>
    const axios = require('axios');

    export default {
        data: function() {
            return {
                arr_link: [],
            } 
        },
        created() {
            axios.get('https://api.rss2json.com/v1/api.json?rss_url=https://thanhnien.vn/rss/viet-nam.rss', {
                params: {
                    api_key: 'my_api_key',
                    count: 50
                }
            })
            .then(res=>{
                var result     = res.data.items;
                var char_check = /(Covid|corona|Bệnh nhân số|Phong tỏa|cách ly|bệnh nhân thứ|ncov|Covid-19)/i;

                for (var i = 0; i < result.length; i++) {                         // For loop through the data then 
                    if (char_check.test(result[i].title)) {                       // reate an object to push inside
                        var get_link = result[i].link;                            // arr_link array.
                        var get_text = result[i].title;
                        var link_obj = {id: i, src: get_link, text: get_text}; 
                        this.arr_link.push(link_obj);   
                    }
                }
            })
            .catch(err=>console.log(err));

            console.log(this.arr_link); // Still can show it

            console.log(this.arr_link[0]); // Undefined result, I have also tried with this.arr_link[1] or another index.
        }
    }
</script>

Log out `link_obj` in your for loop. Are those being created as expected? — isherwood, Mar 19 '20 at 16:41
Reason why you see objects in `console.log` output but can't access them in code https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays — ponury-kostek, Mar 19 '20 at 16:51

score 1 · Answer 1 · answered Mar 19 '20 at 17:34

1

Try using callback to see the log

.then(res=>{

        // your code as it is

      },()=>{
          console.log(this.arr_link);

          console.log(this.arr_link[0]);
})
.catch(err=>console.log(err));

answered Mar 19 '20 at 17:34

Atiqul Alam

181
4

M A Salman · Answer 2 · 2020-03-19T17:11:25.900

I tested using fetch. You are not setting the data properly. Assign the res.items to result instead of res.data.items

.then(res => {
    var result = res.items;
    var char_check = /(Covid|corona|Bệnh nhân số|Phong tỏa|cách ly|bệnh nhân thứ|ncov|Covid-19)/i;

    for (var i = 0; i < result.length; i++) { // For loop through the data then 
      if (char_check.test(result[i].title)) { // reate an object to push inside
        var get_link = result[i].link; // arr_link array.
        var get_text = result[i].title;
        var link_obj = {
          id: i,
          src: get_link,
          text: get_text
        };
        this.arr_link.push(link_obj);
      }
    }
  console.log(arr_link); // Still can show it
  console.log(arr_link[0]);
  })

var arr_link = [];
(async () => {
  fetch("https://api.rss2json.com/v1/api.json?rss_url=https://thanhnien.vn/rss/viet-nam.rss")
    .then((response) => response.json())
    .then((res) => {
      var result = res.items;
      var char_check = /(Covid|corona|Bệnh nhân số|Phong tỏa|cách ly|bệnh nhân thứ|ncov|Covid-19)/i;
      for (var i = 0; i < result.length; i++) { // For loop through the data then 
        if (char_check.test(result[i].title)) { // reate an object to push inside
          var get_link = result[i].link; // arr_link array.
          var get_text = result[i].title;
          var link_obj = {
            id: i,
            src: get_link,
            text: get_text
          };
          arr_link.push(link_obj);
        }
      }
    console.log(arr_link); // Still can show it
    console.log(arr_link[0])
    })
    .catch((err) => console.log(err))
  ;
})();

Why are my array elements being reported as undefined?

2 Answers2