Read JSON from JavasScript - Cannot read property '0' of undefined

Question

I have a JSON response similar to this from ConvertAPI :

{
   "ConversionCost":10,
   "Files":[
      {
         "FileName":"somefile_XXX.pdf",
         "FileExt":"pdf",
         "FileSize":63911,
         "FileId":"718cc1XXXXXXXXX5",
         "Url":"https://v2.convertapi.com/d/XXXXXXXXXXXXXXXXXXXXXXX/somefile_XXX.pdf"
      }
   ]
}

Where I am trying to extract the ConversionCost by result.ConversionCost[0] (the result.files[0].Url works fine) in the following script:

let convertApi = ConvertApi.auth({secret: '<API_SECRET>'})
let elResult = document.getElementById('result')
let elResultLink = document.getElementById('resultLink')
let elUrl = document.getElementById('urlInput')
elResult.style.display = 'none'

// On file input change, start conversion
document.getElementById('convertBtn').addEventListener('click', async e => {
    elResult.style.display = 'none'
    document.documentElement.style.cursor = 'wait'
    try {

        // Converting web page to PDF file
        let params = convertApi.createParams()
        params.add('url', elUrl.value)
        params.add('FileName', 'The_FileName.pdf');
        params.add('LoadLazyContent', 'true');
        params.add('Zoom', '1.5');
        params.add('PageSize', 'a4');
        params.add('MarginTop', '0');
        params.add('MarginRight', '0');
        params.add('MarginBottom', '0');
        params.add('MarginLeft', '0');
        let result = await convertApi.convert('web', 'pdf', params)


        fetch('some_page.asp?id=315&initials=DDD&pdf_url=' + result.files[0].Url + '&ConversionCost= ' + result.ConversionCost[0]).then(function(response) {
          return response.json();
        }).then(function(data) {
          console.log(data);
        }).catch(function() {
          console.log("Booo");
        });

        // Showing link with the result file
        elResultLink.setAttribute('href', result.files[0].Url)
        elResultLink.innerText = result.files[0].Url
        elResult.style.display = 'block'

    } finally {
        document.documentElement.style.cursor = 'default'

    }
})

But this gives me the error in the console Uncaught (in promise) TypeError: Cannot read property '0' of undefined at HTMLButtonElement.<anonymous>

Am I reading it wrong or what am I missing? .. here is the GitHub vor ConvertAPI JS : https://github.com/ConvertAPI/convertapi-js

Is it supposed to be uppercase `result.Files` instead of `result.files`? — adiga, Jun 12 '21 at 11:25
Hi @adiga .. as I have wrote to one of the other responders it is not the files string I am after, that one is working like it should, it is the sibling called ConversionCost I am having struggles reading. :-) — Stig Kølbæk, Jun 12 '21 at 21:01

score 1 · Answer 1 · answered Jun 12 '21 at 10:40

1

result.ConversionCost is a Number type but u have used it as a array

answered Jun 12 '21 at 10:40

Taron Qalashyan

660
4
8

Hi @Taron Qalashyan .. I did try at first just using `result.ConversionCost` but that gives me a Undefined when I write out the Querystring that I am sending it with. – Stig Kølbæk Jun 12 '21 at 10:50
pls try with this fetch('some_page.asp?id=315&initials=DDD&pdf_url=' + result.Files[0].Url + '&ConversionCost= ' + result.ConversionCost – Taron Qalashyan Jun 12 '21 at 10:54
That is what I have tried, and that is unfortunately what is giving me the output `Undefined` in Chrome Network tab when doing ` Response.Write Request.QueryString("ConversionCost")` in some_page.asp .. – Stig Kølbæk Jun 12 '21 at 10:59
other think is that result is clearing after first usage, try this. resutl1 =result and start to use result1 – Taron Qalashyan Jun 12 '21 at 11:01
`let resutl1 = result` and `result1.ConversionCost` gives an `Uncaught (in promise) ReferenceError: result1 is not defined at HTMLButtonElement.` error – Stig Kølbæk Jun 12 '21 at 21:12
can you share API key?, i will try and send you working solution – Taron Qalashyan Jun 13 '21 at 04:44
you can easily and free sign-up for your own free api here convertapi.com – Stig Kølbæk Jun 13 '21 at 08:07

score 0 · Accepted Answer · answered Jun 14 '21 at 06:52

0

Try this (code not tested):

fetch('includes/save_user_welcomeletter_to_server.asp?id=315&initials=DDD&pdf_url=' + result.files[0].Url + '&pdf_ConversionCost= ' + result.ConversionCost)
.then(r => r.json())
.then(o => { 
    // Showing link with the result file
    elResultLink.setAttribute('href', o.files[0].Url)
    elResultLink.innerText = o.files[0].Url
    elResult.style.display = 'block'
    console.log(o.ConversionCost);
})

answered Jun 14 '21 at 06:52

Jonas

4,683
4
45
81

Hi @Jonas .. The Undefined and NaN is now gone, but the result of console.log and my Request.QueryString("ConversionCost") are both empty. – Stig Kølbæk Jun 14 '21 at 07:41

score -1 · Answer 3 · answered Jun 12 '21 at 10:41

-1

Based on the response that you given above,

the index named is Files try to use result.Files[0].Url

maybe it will work. :)

answered Jun 12 '21 at 10:41

cbrr09

189
8

Hi @chefboyronron .. I am getting the file info from calling `result.files[0].Url`, but its the ConversionCost I need to extract aswell :-) – Stig Kølbæk Jun 12 '21 at 10:46

Read JSON from JavasScript - Cannot read property '0' of undefined

3 Answers3