Question 215072 in Javascript Question posted in
A very good W3school tutorial can be found here.

In Javascript and React, append properties from a first object to a second object that match a key from first object to a value on the second object

First ObjectArray, match key to second ObjectArray "state" value.

Second ObjectArray, append "title" and "color" key/values from first ObjectArray to second ObjectArray if the two letter state key on first ObjectArray matches the "state value on second ObjectArray.

Result should look like this third ObjectArray.

First ObjectArray, match key to second ObjectArray "state" value

{
  "ChartOptions": [
    {
      "title": {
        "CA": "California",
        "GA": "Georgia",
        "KY": "Kentucky",
        "MN": "Minnesota",
        "MO": "Missouri"
      },
      "color": {
        "CA": "#6A5ACD",
        "GA": "#FF0000",
        "KY": "#0000FF",
        "MN": "#FFA500",
        "MO": "#3CB371"
      }
    }
  ]
}

Second ObjectArray, append "title" and "color" key/values from first ObjectArray to second ObjectArray if the two letter state key on first ObjectArray matches the "state value on second ObjectArray

{
  "ChartSummary": [
    {
      "state": "CA",
      "total": 812
    },
    {
      "state": "GA",
      "total": 240
    },
    {
      "state": "KY",
      "total": 167
    },
    {
      "state": "MN",
      "total": 578
    },
    {
      "state": "MO",
      "total": 75
    }
  ]
}

Result should look like this third ObjectArray.

{
  "ChartSummary": [
    {
      "state": "CA",
      "total": 812,
      "title": "California",
      "color": "#6A5ACD"
    },
    {
      "state": "GA",
      "total": 240,
      "title": "Georgia",
      "color": "#FF0000"
    },
    {
      "state": "KY",
      "total": 167,
      "title": "Kentucky",
      "color": "#0000FF"
    },
    {
      "state": "MN",
      "total": 578,
      "title": "Minnesota",
      "color": "#FFA500"
    },
    {
      "state": "MO",
      "total": 75,
      "title": "Missouri",
      "color": "#3CB371"
    }
  ]
}
Tags:

2

Answers


  1. 0

    Match Array Values

    I wrote a little script that appends the colour and title properties from ChartOptions to ChartSummary when the state codes are matching. Also at the end you can check the result in the console since I’ve added a console.log(ChatSummary); line.

    If you have any questions feel free to comment! I hope I could help you.

    My Script:

    let ChartOptions = [
  {
    "title": {
      "CA": "California",
      "GA": "Georgia",
      "KY": "Kentucky",
      "MN": "Minnesota",
      "MO": "Missouri"
    },
    "color": {
      "CA": "#6A5ACD",
      "GA": "#FF0000",
      "KY": "#0000FF",
      "MN": "#FFA500",
      "MO": "#3CB371"
    }
  }
];

let ChartSummary = [
  {
    "state": "CA",
    "total": 812
  },
  {
    "state": "GA",
    "total": 240
  },
  {
    "state": "KY",
    "total": 167
  },
  {
    "state": "MN",
    "total": 578
  },
  {
    "state": "MO",
    "total": 75
  }
];

// Adding colour and title properties to the array
for (let i = 0; i < ChartSummary.length; i++) {
  var state = ChartSummary[i].state;
  ChartSummary[i].title = ChartOptions[0].title[state];
  ChartSummary[i].color = ChartOptions[0].color[state];
}

console.log(ChartSummary);
    Login or Signup to reply.
  2. 0

    This is the best way you can do it with

    var titles = firstObject.ChartOptions[0].title;
var colors = firstObject.ChartOptions[0].color;

secondObject.ChartSummary.forEach(function(item) {
  item.title = titles[item.state];
  item.color = colors[item.state];
});

    The two variables titles and colors are being defined to make the subsequent code more readable and efficient.

    The ChartOptions array in firstObject contains objects which have keys for title and color, which are further objects mapping states to their corresponding titles and colors.

    By defining:

    var titles = firstObject.ChartOptions[0].title;
var colors = firstObject.ChartOptions[0].color;

    You are essentially creating references to these nested objects so that you can use them more directly and avoid repeatedly accessing nested properties, which can be more computationally expensive.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search