Question 110632 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – How to transform two Objects into one overview in Javascript?

I am currently struggling with the formatting of a map operation on two object arrays in Javascript.

So lets say we have two arrays:

var customer = [
  { "Name": "Thomas", "Address": "example street 34", "customerID": 1 },
  { "Name": "Alica", "Address": "example street 24", "customerID": 2 },
  { "Name": "John", "Address": "example bouelvard 4", "customerID": 3 }
]

var orders = [
  { "Product": "iPhone 12", "Amount": 2, "customerID": 1 },
  { "Product": "charger", "Amount": 1, "customerID": 1 },
  { "Product": "screen protection", "Amount": 5, "customerID": 2 }
]

I want to have a result array so that when I print it out, I have an overview over customers with their orders in this way:

{
  customer: {
    "Name": "Thomas",
    "Address": "example street 34",
    "customerID": 1,
  },
  order: [
    {
      "Product": "iPhone 12",
      "Amount": 2,
      "customerID": 1
    },
    {
      "Product": "charger",
      "Amount": 1,
      "customerID": 1
    }
  ]
}

So I basically did a map function and searched for orders with the same customer id.

let overview = customers.map(element1 => ({ ...element1, : [...(orders.filter(element => element.customerID === element1.customerID))] }));

This is what I get:

{
  "Name": "Thomas",
  "Address": "example street 34",
  "customerID": 1,
  "order": [[Object], [Object]]
}

How do I get the "customer:" before the output of the customer objects and why do I get the Object output in my order array?

Tags:

4

Answers


  1. 0

    try with that:

    customer.map(element1 => (
   {...element1, order: orders.filter(element => element.customerID === element1.customerID)}
)))

    You were missing ‘order’ key and also don’t need to spread since filter returns an array (empty if nothing filtered)

    enter image description here

    Login or Signup to reply.
  2. 0

    First you can create map from orders array where customerId will be key and array with all orders belonging to one customer will be map value.

    Next is initialising empty results array and iterating customers array. While iterating, push new object to results array. New object should contain 2 fields, customer and order. customer is object from iteration and order is map value which you get from previously generate map using customer.customerID as map key.

    This way, performance are increased because fetching data from Map data structure has O(1) time complexity. Using filter method to find all orders for specific customer is time consuming with complexity O(n).

    const customers = [{"Name": "Thomas", "Address": "example street 34", "customerID": 1},{"Name": "Alica", "Address": "example street 24", "customerID": 2}, {"Name": "John", "Address": "example boulevard 4", "customerID": 3}];

const orders = [{"Product": "iPhone 12", "Amount": 2, "customerID": 1},{"Product": "charger", "Amount": 1, "customerID": 1},{"Product": "screen protection", "Amount": 5, "customerID": 2}];

const ordersMap = new Map();
for (const order of orders) {
    const { customerID } = order;

    const mapValue = ordersMap.get(customerID);

    if (mapValue) {
        mapValue.push(order);
    } else {
        ordersMap.set(customerID, [order]);
    }
}

const results = [];
for (const customer of customers) {
    results.push({
        customer,
        order: ordersMap.get(customer.customerID),
    });
}

console.log(results)
    Login or Signup to reply.
  3. 0

    You’re almost there:

    let overview = customer.map(customer => ({
    customer,
    order: orders.filter(order => customer.customerID === order.customerID)
}))
    Login or Signup to reply.
  4. 0

    You are so close! So very close. You can rename customer to customers just to avoid confusion the element1 becomes customer and the rest is as shown below:

    const 
    customers = [ { "Name": "Thomas", "Address": "example street 34", "customerID": 1 }, { "Name": "Alica", "Address": "example street 24", "customerID": 2 }, { "Name": "John", "Address": "example bouelvard 4", "customerID": 3 } ],
    orders = [ { "Product": "iPhone 12", "Amount": 2, "customerID": 1 }, { "Product": "charger", "Amount": 1, "customerID": 1 }, { "Product": "screen protection", "Amount": 5, "customerID": 2 } ],
    
    custOrders = customers
        .map(
            customer => 
            ({
                customer,
                orders:orders
                    .filter(order => order.customerID === customer.customerID)
            })
        );
        
        
        
console.log( custOrders );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search