Object.assign (REACT) output incorrect and not working as expected

Question

Guys I have a project on react that have 3 components , and I have to take the state of this 3 pages and mount one JSON in a final page.

My components are not child and parents, so the solution that I Found was set the state to Localstorage, get the state and transform in Json, It worked, I Have my JSONs but I Need to combine theese JSONs into ONE, I tried concat, but it didn't work, and I'm trying with Object.assign I Saw some examples and Documentation but it's not working for me, and I can't see why.

JSON 1:

{
"A1_EMAIL": "[email protected]",
"formErrors": {
    "A1_EMAIL": "",
    "A1_CGC": ""
},
"A1_EMAILVALID": ["[email protected]", "xxx", "wwwww.", "com"],
"A1_CGCVALID": false,
"showError": false,
"showErrorCGC": false,
"A1_CGC": "328114xxx14000197",
"A1_NOME": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
"A1_NREDUZ": "sssaaaaa",
"A1_SITUA": "ATIVA",
"A1_DTNASC": "19/02/2019",
"NaturezaJ": "213-5 - Empresário (Individual)",
"AtividadePrincipal": "62.01-5-01",
"AtividadeSecundária": "Suporte técnico, manutenção e outros serviços em tecnologia da informação",
"A1_CEP": "04.550-003",
"A1_BAIRRO": "Vila Olímpia",
"A1_EST": "SP",
"A1_END": "xxxxx",
"A1_MUN": "São Paulo",
"checked": true,
"A1_ENDCOB": "gwwwwwww",
"A1_CEPC": "04.550-003",
"A1_BAIRROC": "Vila Olímpia",
"A1_MUNC": "São Paulo"

}

JSON 2:

{
"U5_CONTAT": "e3e3",
"U5_EMAIL": "e3e3",
"A1_INSCR": "fr",
"U5_FONE": "rr"

}

OUTPUT that I'm getting:

{0: "{", 1: """, 2: "U", 3: "5", 4: "_", 5: "C", 6: "O", 7: "N", 8: "T", 9: "A", 10: "T", 11: """, 12: ":", 13: """, 14: "e", 15: "3", 16: "e", 17: "3", 18: """, 19: ",", 20: """, 21: "U", 22: "5", 23: "_", 24: "E", 25: "M", 26: "A", 27: "I", 28: "L", 29: """, 30: ":", 31: """, 32: "e", 33: "3", 34: "e", 35: "3", 36: """, 37: ",", 38: """, 39: "A", 40: "1", 41: "_", 42: "I", 43: "N", 44: "S", 45: "C", 46: "R", 47: """, 48: ":", 49: """, 50: "f", 51: "r", 52: """, 53: ",", 54: """, 55: "U", 56: "5", 57: "_", 58: "F", 59: "O", 60: "N", 61: "E", 62: """, 63: ":", 64: """, 65: "r", 66: "r", 67: """, 68: "}", 69: ":", 70: """, 71: """, 72: "}", 73: ",", 74: """, 75: "A", 76: "1", 77: "_", 78: "E", 79: "M", 80: "A", 81: "I", 82: "L", 83: "V", 84: "A", 85: "L", 86: "I", 87: "D", 88: """, 89: ":", 90: "[", 91: """, 92: "g", 93: "r", 94: "u", 95: "p", 96: "o", 97: "h", 98: "p", 99: "s", …}

My Code:

var JSON1 = localStorage.getItem('JSONCLIENTE 1')
var JSON2 = localStorage.getItem('JSONCLIENTE 2')
var newObj = Object.assign({}, JSON1,JSON2)

        console.log('Json 1:')
        console.log(JSON1)
        console.log('Json 2:')
        console.log(JSON2)
        console.log('Converted Object 2:')
        console.log(newObj)

What Am I doing wrong

getItem returns a string, not an object.

Heretic Monkey
– Heretic Monkey

2020-01-16 11:58:44 +00:00
Commented Jan 16, 2020 at 11:58 — Heretic Monkey
– Heretic Monkey, Commented Jan 16, 2020 at 11:58

Nikhil Goyal · Accepted Answer · 2020-01-16 11:57:13Z

1

I assume the localStorage data is always a string so you may need to use JSON.parse when retrieving from localStorage as well.

If the keys are not the same in both the JSON, you can try something like

var a = {
  message: 'Hello'
};

var b = {
  text: 'Hi'
};

var c = {
  ...a,
  ...b
};

console.log(c);

answered Jan 16, 2020 at 11:57

Nikhil Goyal

1,9831 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander · Accepted Answer · 2020-01-16 11:58:39Z

0

Because json it's a string. You need turn json into an js-object. Use JSON.parse()

var JSON1 = JSON.parse(localStorage.getItem('JSONCLIENTE 1'))
var JSON2 = JSON.parse(localStorage.getItem('JSONCLIENTE 2'))
var newObj = Object.assign({}, JSON1,JSON2)

    console.log('Json 1:')
    console.log(JSON1)
    console.log('Json 2:')
    console.log(JSON2)
    console.log('Converted Object 2:')
    console.log(newObj)

answered Jan 16, 2020 at 11:58

Alexander

1,4408 silver badges12 bronze badges

Collectives™ on Stack Overflow

Object.assign (REACT) output incorrect and not working as expected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related