CODEWITHSUNDEEP
javascriptarraysloopspropertiessub-array
Chris Michael
Chris Michael

Reputation: 1627

How to add a new property to a subarrays?

I have an array with subarrays, I'm trying to add a new property title to each subarray. I have an implementation, but instead of adding the title to each subarray it puts it at the end of the array

[
  { nextEpisodeDate: null },
  {
    episode: 12,
    id: '28800/tokyo-ghoul-12',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/12/th_3.jpg'
  },
  {
    episode: 11,
    id: '28459/tokyo-ghoul-11',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/11/th_3.jpg'
  },
  {
    episode: 10,
    id: '28001/tokyo-ghoul-10',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/10/th_3.jpg'
  },
  {
    episode: 9,
    id: '27741/tokyo-ghoul-9',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/9/th_3.jpg'
  },
  {
    episode: 8,
    id: '27092/tokyo-ghoul-8',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/8/th_3.jpg'
  },
  {
    episode: 7,
    id: '26689/tokyo-ghoul-7',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/7/th_3.jpg'
  },
  {
    episode: 6,
    id: '26529/tokyo-ghoul-6',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/6/th_3.jpg'
  },
  {
    episode: 5,
    id: '26431/tokyo-ghoul-5',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/5/th_3.jpg'
  },
  {
    episode: 4,
    id: '26373/tokyo-ghoul-4',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/4/th_3.jpg'
  },
  {
    episode: 3,
    id: '26278/tokyo-ghoul-3',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/3/th_3.jpg'
  },
  {
    episode: 2,
    id: '26188/tokyo-ghoul-2',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/2/th_3.jpg'
  },
  {
    episode: 1,
    id: '26103/tokyo-ghoul-1',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/1/th_3.jpg'
  }
]

I want to achieve the following

  {
    episode: 12,
    title: '......'
    id: '28800/tokyo-ghoul-12',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/12/th_3.jpg'
  },
  {
    episode: 11,
    title: '......'
    id: '28459/tokyo-ghoul-11',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/11/th_3.jpg'
  },

Implementation


 * @param  {Object} obj   The original object
 * @param  {String} key   The key for the item to add
 * @param  {Any}    value The value for the new key to add
 * @param  {Number} index The position in the object to add the new key/value pair [optional]
var addToObject = function (obj, key, value, index) {
    // Create a temp object and index variable
    var temp = {};
    var i = 0;
    // Loop through the original object
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            // If the indexes match, add the new item
            if (i === index && key && value) {
                temp[key] = value;
            }
            // Add the current item in the loop to the temp obj
            temp[prop] = obj[prop];
            // Increase the count
            i++;
        }
    }
    // If no index, add to the end
    if (!index && key && value) {
        temp[key] = value;
    }
    return temp;
};

let list = addToObject(listByEps, 'title' , '....', 0)

Upvotes: 0

Views: 150

Answers (4)

Chris Michael
Chris Michael

Reputation: 1627

The solution I had to use was based on merging two objects by manipulating the logic of the properties.

const MergeRecursive = (obj1 , obj2) => {
  for(var p in obj2) {
    try{
      // Property in destination object set; update its value.
      if(obj2[p].constructor == Object){
        obj1[p] = MergeRecursive(obj1[p], obj2[p]);
      }else{
        obj1[p] = obj2[p];
      }
    }catch(e){
      // Property in destination object not set; create it and set its value.
      obj1[p] = obj2[p];
    }
  }
  return obj1;
}

module.exports = {
  MergeRecursive
}

  listByEps =  MergeRecursive(listByEps.slice(1) , chaptersTitles)

Upvotes: 0

Chris Michael
Chris Michael

Reputation: 1627

I have a temporary solution, but it is assigning the same title for all subarrays. It should assign different values in the title property. When I do console.log (title) it shows me all the titles

  let newListByEps;


    Array.from({length: chaptersTitles.length} , (v , k) =>{
      var title = chaptersTitles[k].title;
      console.log(title);

      // slice (1) to skip the subarray with the nextEpisodeDate property
      newListByEps =  listByEps.slice(1).map(item =>{
        Object.assign(item , {
          title: title
        })
        return item;
      })
    })

    console.log(newListByEps);

[
  { nextEpisodeDate: null },
  {
    episode: 12,
    id: '28800/tokyo-ghoul-12',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/12/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 11,
    id: '28459/tokyo-ghoul-11',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/11/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 10,
    id: '28001/tokyo-ghoul-10',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/10/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 9,
    id: '27741/tokyo-ghoul-9',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/9/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 8,
    id: '27092/tokyo-ghoul-8',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/8/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 7,
    id: '26689/tokyo-ghoul-7',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/7/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 6,
    id: '26529/tokyo-ghoul-6',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/6/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 5,
    id: '26431/tokyo-ghoul-5',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/5/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 4,
    id: '26373/tokyo-ghoul-4',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/4/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 3,
    id: '26278/tokyo-ghoul-3',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/3/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 2,
    id: '26188/tokyo-ghoul-2',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/2/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 1,
    id: '26103/tokyo-ghoul-1',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/1/th_3.jpg',
    title: 'Ghoul'
  }
]

The chaptersTitles variable has the list of titles and I want to pass it to the newListByEps variable. The reason that he is showing the same title for the whole newListByEps array is because every time he runs through the array he repeats the same list N times. In this case repeat the same arrat (chaptersTitles) 12 times

If someone can help me solve the problem I will appreciate it. Apparently the problem is in using Array.from ({});

This is the list of chaptersTitles.

[
  { episode: 1, title: 'Tragedy', date: '2014-07-04' },
  { episode: 2, title: 'Incubation', date: '2014-07-11' },
  { episode: 3, title: 'Dove', date: '2014-07-18' },
  { episode: 4, title: 'Supper', date: '2014-07-25' },
  { episode: 5, title: 'Scar', date: '2014-08-01' },
  { episode: 6, title: 'Cloudburst', date: '2014-08-08' },
  { episode: 7, title: 'Captivity', date: '2014-08-15' },
  { episode: 8, title: 'Circular', date: '2014-08-22' },
  { episode: 9, title: 'Birdcage', date: '2014-08-29' },
  { episode: 10, title: 'Aogiri', date: '2014-09-05' },
  { episode: 11, title: 'High Spirits', date: '2014-09-12' },
  { episode: 12, title: 'Ghoul', date: '2014-09-19' }
]

Upvotes: 0

lawrence-witt
lawrence-witt

Reputation: 9354

I think you should really have another look at what it is exactly you're trying to achieve here, because it is a little bit confusing. For the purposes of this example I'm assuming that listByEps is the array that you posted in your first code section, since that seems to make the most sense for what you try to do next.

In which case the first thing to note is that listByEps is not an object, it is an array of objects. Trying to read the properties of it will not work as it has none, only indexed elements. 

var addToObject = (array, key, value, index) => {
    if(index) {
        array[index][key] = value;
    } else {
        array.push({
            key: value
        })
    };
    return array;
}

This code targets the object at the given index in the listByEps array and adds the new key/value pair. If there is no index it pushes a new object to the end of the array. It then returns the whole array with the changes made, because that's what you seem to want it to do when you call it as let list = addPropertyToObj(listByEps, 'title' , '....', 0) at the end.

Upvotes: 0

user3791775
user3791775

Reputation: 471

by reference:

listByEps.forEach(item => item.title = '......')

pure assignment

let result = listByEps.map(item => {
  Object.assign({}, item, {title: '......'})
  return item;
});

just examples

Upvotes: 1

Related Questions