How to iterate the key value pairs of an object in an array in javascript

Question

I have some data I'd like to display in my front end but its name property is an array of objects, with an object nested in that object. This is how the data is structured in the request:

name: Array [ {…} ]

  0: Object { 0: "E", 1: "r", 2: "i", … }

    0: "E"

    1: "r"

    2: "i"

    3: "c"

    4: " "

    5: "C"

    6: " "

    7: "P"

    8: "e"

    9: "z"

    10: "z"

    11: "u"

    12: "l"

    13: "o"

    _id: "6186b6777a38b7da536a6ffd"

<prototype>: Object { … }

length: 1

I can't map through it (userData.name[0].map) because its not an array.

Whats the correct way to iterate though an object like this and join each letter together?

Does this answer your question? [How to iterate over a JavaScript object?](https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object) — Cjmarkham, Nov 06 '21 at 17:39
You can use `Object.keys()` which returns an array of all keys in your object and map over that, using each value to index the object — sode, Nov 06 '21 at 17:44

score 1 · Answer 1 · answered Nov 06 '21 at 17:47

1

As of right now I'm using this

  const fullName = Object.values(userData.name[0]);
  console.log(fullName);
  fullName.pop();
  const name = fullName.join("");
  console.log(name);

Which gives me what I'm looking for (// Eric C Pezzulo)

Its not pretty but it works, If anyone has a simpler way to do this or clean this up I'm open to any suggestions.

answered Nov 06 '21 at 17:47

Eric Pezzulo

299
4
18

Could you not simply fix the data you're receiving so you don't have to worry about doing a transform? Is is from an API, something else in the app? – Andy Nov 06 '21 at 18:08
This is from my API, but the format for the user was generated by Next Auth, so unfortunately I don't have control over how the google/github/twitter providers and Next Auth store data – Eric Pezzulo Nov 06 '21 at 18:12

sode · Answer 2 · 2021-11-06T17:57:29.887

1

Something like this may look a little cleaner

const arr = [
  {
    0: 'E',
    1: 'r',
    2: 'i',
    3: 'c',
    4: ' ',
    5: 'C',
    6: ' ',
    7: 'P',
    8: 'e',
    9: 'z',
    10: 'z',
    11: 'u',
    12: 'l',
    13: 'o',
    _id: '6186b6777a38b7da536a6ffd'
  }
];

const fullName = Object.values(arr[0]).slice(0, -1).join('');
console.log(fullName);

edited Nov 06 '21 at 17:57

answered Nov 06 '21 at 17:51

sode

236
2
7

Chris Strickland · Answer 3 · 2021-11-06T18:52:22.510

I don't know that there's a simpler way, but if you use slice you can do it all in one chained line. You could also create a function, for readability and extension.

const arr = [{
  0: 'E', 1: 'r', 2: 'i', 3: 'c', 4: ' ', 5: 'C', 6: ' ',
  7: 'P', 8: 'e', 9: 'z', 10: 'z', 11: 'u', 12: 'l', 13: 'o',
  _id: '6186b6777a38b7da536a6ffd'
}];

let name = Object.values(arr[0]).slice(0,-1).join('');
console.log(name);

const getFull=(o)=>Object.values(o).slice(0,-1).join('');
console.log(getFull(arr[0]));

Or to transform all:

const arr = [{
  0: 'E', 1: 'r', 2: 'i', 3: 'c', 4: ' ', 5: 'C', 6: ' ',
  7: 'P', 8: 'e', 9: 'z', 10: 'z', 11: 'u', 12: 'l', 13: 'o',
  _id: '6186b6777a38b7da536a6ffd'
},{
  0: 'C', 1: 'h', 2: 'r', 3: 'i', 4: 's', 5: ' ',
  7: 'S', 8: 't', 9: 'r', 10: 'i', 11: 'c', 12: 'k', 13: 'l', 14: 'a', 15: 'n', 16: 'd',
  _id: '6186b6777a38b7da536a6ffd'
}];

const getFull=(o)=>Object.values(o).slice(0,-1).join('');
let buffer = arr.map(a=>getFull(a));
console.log(buffer);

How to iterate the key value pairs of an object in an array in javascript

3 Answers3