0

Context : Angular 5 app, NodeJS (with Nest) backend, MongoDB (Mongoose)

  • When I console.log the server's response, it looks fine

  • When I assign this very same response to a variable then console.log the variable, I get "lang":undefined instead of "lang":"cn". This blows my mind.

    this.http
  .post(route, payload)
  .subscribe(res => {

    // logs '...."lang":"cn"....' (correct)
    console.log(`res._body = `, res["_body"])

    // logs { ... "lang":"cn" ... } (correct)
    console.log(`JSON.parse = `, JSON.parse(res["_body"]))

    // logs { ... "lang":"cn" ... } (correct)
    console.log(`res.json = `, res.json())

    let response = res.json()

    // Logs { ... "lang": undefined ... } (WTF?)
    console.log(`response = `, response)
  })

Why is lang undefined after assigning res.json() to a variable? It does the exact same thing with JSON.parse().

Here's more log : ( I have removed what I believe to be irrelevant parts of the JSON data)

RES._body =  {"translations":[{"score":3,"date":"Tue Apr 10 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)","expr":"'風力発電' OR '風力発電機'","lang":"cn","langFull":"Simplified Chinese (中文)","dateHuman":"a month ago"},{"score":5,"date":"Tue Apr 30 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)","expr":"pale OR lame OR hélice","lang":"fr","langFull":"French (Français)","dateHuman":"8 days ago"},{"score":10,"date":"Tue Apr 19 2018 11:35:36 GMT+0200 (W. Europe Daylight Time)","expr":"blade OR strip OR (winding* NEAR2 (turbine OR power OR generator))","lang":"en","langFull":"English","dateHuman":"19 days ago"}]

JSON.parse = { "translations" : [
    {
      "score": 3,
      "date": "Tue Apr 10 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "'風力発電' OR '風力発電機'",
      "lang": "cn", // <--------------------------- HERE OK
      "langFull": "Simplified Chinese (中文)",
      "dateHuman": "a month ago"
    },
    {
      "score": 5,
      "date": "Tue Apr 30 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "pale OR lame OR hélice",
      "lang": "fr",
      "langFull": "French (Français)",
      "dateHuman": "8 days ago"
    },
    {
      "score": 10,
      "date": "Tue Apr 19 2018 11:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "blade OR strip OR (winding* NEAR2 (turbine OR power OR generator))",
      "lang": "en",
      "langFull": "English",
      "dateHuman": "19 days ago"
    }
  ]}

res.json() = { "translations": [
    {
      "score": 3,
      "date": "Tue Apr 10 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "'風力発電' OR '風力発電機'",
      "lang": "cn", // <--------------------------- HERE OK
      "langFull": "Simplified Chinese (中文)",
      "dateHuman": "a month ago"
    },
    {
      "score": 5,
      "date": "Tue Apr 30 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "pale OR lame OR hélice",
      "lang": "fr",
      "langFull": "French (Français)",
      "dateHuman": "8 days ago"
    },
    {
      "score": 10,
      "date": "Tue Apr 19 2018 11:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "blade OR strip OR (winding* NEAR2 (turbine OR power OR generator))",
      "lang": "en",
      "langFull": "English",
      "dateHuman": "19 days ago"
    }
  ]}


response = { "translations": [
    {
      "score": 3,
      "date": "Tue Apr 10 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "'風力発電' OR '風力発電機'",
      "lang": undefined, // <--------------------------- HERE WTF???
      "langFull": "Simplified Chinese (中文)",
      "dateHuman": "a month ago"
    },
    {
      "score": 5,
      "date": "Tue Apr 30 2018 13:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "pale OR lame OR hélice",
      "lang": "fr",
      "langFull": "French (Français)",
      "dateHuman": "8 days ago"
    },
    {
      "score": 10,
      "date": "Tue Apr 19 2018 11:35:36 GMT+0200 (W. Europe Daylight Time)",
      "expr": "blade OR strip OR (winding* NEAR2 (turbine OR power OR generator))",
      "lang": "en",
      "langFull": "English",
      "dateHuman": "19 days ago"
    }
  ]}
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63
  • @NeilLunn I made a snippet because I could not get the code block to be properly formatted. – Jeremy Thille May 08 '18 at 08:09
  • Use the other block beside the snippet icon. Or just press Ctrl+K to indent a highlighted block. Snippets are for code that actually executes to a result. Most importantly stop spamming tags. The only tags for your question are those related "directly" to the premise in the question. This is "angular" code only. So you don't attach everything else. 11K rep means you're not new, but I'm editing your posts a lot. – Neil Lunn May 08 '18 at 08:10
  • ...and may I know why I'm getting downvoted to oblivion? – Jeremy Thille May 08 '18 at 08:13
  • Well I haven't, despite the points brought up. But I'd wager an MCVE has something to do with it. – Neil Lunn May 08 '18 at 08:15
  • Since JSON doesn't even have the concept of `undefined`, my best guess is that you're running into [this problem](http://stackoverflow.com/questions/38660832/element-children-has-elements-but-returns-empty-htmlcollection) and code **later** in your app is setting that property to `undefined`. It doesn't affect the one you log with the `res.json()` prefix because you're calling `res.json()` a second time, and thus getting a second object graph. Since that's the one you're using, that's the one that code later is modifying. – T.J. Crowder May 08 '18 at 08:38
  • If you can't find it with normal debugging, here's a hack to help you find it: After `var response = res.json();`, add `var lang0 = response.translations[0].lang; Object.defineProperty(response.translations[0], "lang", { get: function() { return lang0; }, set: function(newValue) { if (newValue === undefined) { debugger; } lang0 = newValue; }});` Then when you run with devtools open, it'll break when something tries to set `lang` to `undefined` on that first entry -- and you can look at the call stack to find out why. Good luck! – T.J. Crowder May 08 '18 at 08:40
  • 1
    Yes! That was exactly it. I was starting to suspect Chrome's console's weird async-like behaviour. Another function was altering the data, then the data was being logged. Your code helped me find the issue. TJ I'd like to be half as good as you some day :) Thanks – Jeremy Thille May 08 '18 at 08:55
  • @JeremyThille: You're very kind. I've just been doing this a while. :-) – T.J. Crowder May 08 '18 at 08:57

0 Answers0