Object.assign using two arrays to create a new array of objects

Hey

My code is currently:

countriesToRender = () => {
return this.countries().map(country => {
  this.developersPerCountry().find(
    developerCount => developerCount.id === country.id
  )
  Object.assign(country, developerCount)
})}

Both countries and developerCount arrays are in the correct order.

My problem could just be syntactical, developerCount isn’t currently available in the last line.

I need an array of objects [{country1, developerCount1}, {country2, developerCount2}]

Thanks!

Please post a link to the exercise or the complete code as you have it.

In this case, without knowing what the countries array and developersPerCountry functions are, I can’t help you.

here’s a sandbox with most of it in there,

the seeds are an array of developers:
developer = {
country: “Afghanistan”,
start: “10/19/17 10:43”,
end: “10/19/17 2:37”
},

I’ve pushed it now if you’d like to look

Looking at what you’re trying to do, and your incoming data structure, I’d actually recommend that you set up a new object where the each country is a key, and then you can reduce the number of devs to that key.

for an example of what I’m talking about, see: https://repl.it/@metasean/rummsf-objectassign

that looks pretty neat… so does away with the need for my other functions, just does it all in one step

1 Like

Yes, and it also reduces (no pun intended, but enjoyed nonetheless) a lot of unnecessary processing.

A little bit sad to delete my hard won functions that work… but this is just so neat, like four lines. Thanks so much. I was reading about reduce but it seems a bit weird to me, not sure how it relates to loops or iterators.

I totally understand that sadness! :broken_heart: :disappointed:

Believe it or not, as you grow your developer chops, it can actually become a really amazing experience to toss your code because you’ve learned better approaches!


map, filter, and reduce definitely took me a while to wrap my head around, but once I did, it was a major level up in my skills!

This following graphic is a light-hearted, high-level summary of the difference between the three. Despite it’s humor, if you really think about what’s happening it’s actually a great way to think about each method.
(Note: in case it isn’t obvious, the image is not using JavaScript syntax.)

Also, many examples of reduce use a number as the accumulator, but just like in the image, you can actually accumulate pretty much anything :wink:

As for the relationship with loops or iterators, in map, filter, reduce, forEach, and a few others, the iteration is simply being handled for you by the JS engine.

The distinction between map and forEach can seem unclear at first, basically, map returns a completely new array, while forEach doesn’t. Because of developer expectations, you should also NEVER mutate the original array using a map (a lot of devs think that you can’t mutate via a map, but you absolutely can, you just really, really shouldn’t!)

thanks, yeah I’ve been using map and filter for a while but reduce is new to me. You’re right most of the example online use numbers for it but it can probably be used in many different ways.

I’m trying to render the countries and devCount numbers in Table.js using Object.keys but get:
TypeError: Cannot convert undefined or null to object

getCountryNames = () => {
    return Object.keys(this.props.countriesToRender);
  };

  render() {
    return (
      <div>
        <table className="ui celled center aligned table">
          <thead>
            <tr>
              <th>Country</th>
              <th>Developers</th>
            </tr>
          </thead>
          <tbody>
            <td>
              {this.getCountryNames().map(name => {
                return <tr>{name}</tr>;
...

Object.keys is old fashioned anyway?

I need to populate this table:

Object.keys is still used pretty frequently.

From what I can see, getCountryNames is correct, and you’re actually calling it, so I’m not sure why you’re getting undefined.

That said, you should wrap your <td>s in at least one <tr>.

Unfortunately, I’ve got to go, so you might want to post this latest problem as a new issue (and make sure you post runnable code that folks can run, debug live, etc!)

Yeah I’m definitely getting plenty <td> errors, I’ve learnt to ignore them, but if the <tr> fixes it then great!
Thanks again! good to know the keys bit is right too.