convert Json into a JS object

Question

id like to create an new object "formattedCharacters" from the object data. I need to capture every ID and filter the elements id, name, image, species, gender, location and status but I am unable to pass the data into the new object.

My idea was to pass the object to an array using object values, and then use for each to pass every element into my new array of objects, nevertheless I have been unable to do it.

Could you please help assesing why this isnt working and any tips on what should I try?

 // Json data example function getCharacters() { const data = { info: { count: 671, pages: 34, next: 'https://rickandmortyapi.com/api/character?page=2', prev: null, }, results: [{ id: 1, name: 'Rick Sanchez', status: 'Alive', species: 'Human', type: '', gender: 'Male', origin: { name: 'Earth (C-137)', url: 'https://rickandmortyapi.com/api/location/1', }, location: { name: 'Earth (Replacement Dimension)', url: 'https://rickandmortyapi.com/api/location/20', }, image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg', episode: [ 'https://rickandmortyapi.com/api/episode/1', 'https://rickandmortyapi.com/api/episode/2', ], url: 'https://rickandmortyapi.com/api/character/1', created: '2017-11-04T18:48:46.250Z', }, { id: 2, name: 'Morty Smith', status: 'Alive', species: 'Human', type: '', gender: 'Male', origin: { name: 'Earth (C-137)', url: 'https://rickandmortyapi.com/api/location/1', }, location: { name: 'Earth (Replacement Dimension)', url: 'https://rickandmortyapi.com/api/location/20', }, image: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg', episode: [ 'https://rickandmortyapi.com/api/episode/1', 'https://rickandmortyapi.com/api/episode/2', ...... // here is the problem const formatedCharcters = data.results formatedCharcters.forEach(character => { return { id: character.id name: character.name status: character.status species: character.species gender: character.gender location: character.location.name image: character.image } }) return formatedCharcters; } const characters = getCharacters();

Answer 1

You will want to use something like map instead

This is a simply change to your code:

formatedCharcters = data.results.map(character => {

Answer 2

Here's a guess of what you're trying to achieve. I think you're trying to map data into objects with a forEach loop. Sadly this is not possible with forEach , but rather with the map function instead. Let me know if this is what you wanted. I am willing to edit my answer depending on any other details.

 const results = [{ id: 1, name: 'Rick Sanchez', status: 'Alive', species: 'Human', type: '', gender: 'Male', origin: { name: 'Earth (C-137)', url: 'https://rickandmortyapi.com/api/location/1', }, location: { name: 'Earth (Replacement Dimension)', url: 'https://rickandmortyapi.com/api/location/20', }, image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg', episode: [ 'https://rickandmortyapi.com/api/episode/1', 'https://rickandmortyapi.com/api/episode/2', ], url: 'https://rickandmortyapi.com/api/character/1', created: '2017-11-04T18:48:46.250Z', }, { id: 2, name: 'Morty Smith', status: 'Alive', species: 'Human', type: '', gender: 'Male', origin: { name: 'Earth (C-137)', url: 'https://rickandmortyapi.com/api/location/1', }, location: { name: 'Earth (Replacement Dimension)', url: 'https://rickandmortyapi.com/api/location/20', }, image: 'https://rickandmortyapi.com/api/character/avatar/2.jpeg', episode: [ 'https://rickandmortyapi.com/api/episode/1', 'https://rickandmortyapi.com/api/episode/2', ], url: 'https://rickandmortyapi.com/api/character/1', created: '2017-11-04T18:48:46.250Z', }] function getCharacters() { const charachters = results.map(character => { return { id: character.id, name: character.name, status: character.status, species: character.species, gender: character.gender, location: character.location.name, image: character.image, }; }); return charachters; } console.log(getCharacters());

Answer 3

I am not sure that I completely understand your question, but here is one way you could achieve the result you are probably looking for. I have kept the forEach loop in case there is a specific reason for keeping it:

// Json data example

function getCharacters() {
  const data = {
    info: {
      count: 671,
      pages: 34,
      next: 'https://rickandmortyapi.com/api/character?page=2',
      prev: null,
    },
    results: [
      {
        id: 1,
        name: 'Rick Sanchez',
        status: 'Alive',
        species: 'Human',
        type: '',
        gender: 'Male',
        origin: {
          name: 'Earth (C-137)',
          url: 'https://rickandmortyapi.com/api/location/1',
        },
        location: {
          name: 'Earth (Replacement Dimension)',
          url: 'https://rickandmortyapi.com/api/location/20',
        },
        image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
        episode: [
          'https://rickandmortyapi.com/api/episode/1',
          'https://rickandmortyapi.com/api/episode/2',
                        
        ],
        url: 'https://rickandmortyapi.com/api/character/1',
        created: '2017-11-04T18:48:46.250Z'
      },
      {
        id: 2,
        name: 'second name',
        status: 'Alive',
        species: 'Human',
        type: '',
        gender: 'Female',
        origin: {
          name: 'Mars???',
          url: 'sample-url.com/sample/example',
        },
        location: {
          name: 'Mars??? (Replacement Dimension)',
          url: 'sample-url.com/sample/example',
        },
        image: 'sample-url.com/sample/example',
        episode: [
          'sample-url.com/sample/example',
          'sample-url.com/sample/example',
                        
        ],
        url: 'sample-url.com/sample/example',
        created: '2019-12-04T11:48:46.250Z'
      }
      ]
    }
   
   // here is the problem
   const formattedCharacters = data.results;
   const character_array = [];

    formattedCharacters.forEach(character=>{
      //here instead of returning multiple times, just push value into an array
    character_array.push({
      id: character.id,
      name: character.name,
      status: character.status,
      species: character.species,
      gender: character.gender,
      location: character.location.name,
      image: character.image
    });


  })

 return character_array;
 
  
}

const characters = getCharacters();

// therefore:
const character_1 = characters[0];

console.log(character_1);

The above would produce an array of all the elements inside of data.results with the values you need. Hope that helped, AlphaHowl.