Соедините два объекта так же, как SQL внутреннее соединение

Question

У меня есть два объекта, например:

countries = [
    { id: 1, name: 'India', image: 'thumb15.jpg' },
    { id: 2, name: 'Africa', image: 'thumb11.jpg' },
    { id: 3, name: 'Kenya', image: 'thumb10.jpg' }
];

cities = [
    { id: 1, name: 'Ahmedabad', country_id: 1 },
    { id: 2, name: 'Vadodara', country_id: 1 },
    { id: 3, name: 'Cairo', country_id: 2 },
    { id: 4, name: 'Kinshasa', country_id: 2 },
    { id: 5, name: 'Luanda', country_id: 2 },
    { id: 6, name: 'Nairobi', country_id: 3 },
    { id: 7, name: 'Nakuru', country_id: 3 },
    { id: 8, name: 'Mombasa', country_id: 3 },
];

Я хочу объединить эти два объекта, например, SQL, например, INNER JOIN

, Я хочу выполнить приведенную ниже операцию (запрос) над двумя вышеуказанными объектами,

SELECT * from countries INNER JOIN cities ON cities.country_id = countries.id

, и мой ожидаемый результат будет выглядеть следующим образом:

expected_result = [
    { id: 1, name: "Ahmedabad", country_id: 1, country_name: "India", country_image: "thumb15.jpg" },
    { id: 2, name: "Vadodara", country_id: 1, country_name: "India", country_image: "thumb15.jpg" },
    { id: 3, name: "Cairo", country_id: 2, country_name: "Africa", country_image: "thumb11.jpg" },
    { id: 4, name: "Kinshasa", country_id: 2, country_name: "Africa", country_image: "thumb11.jpg" },
    { id: 5, name: "Luanda", country_id: 2, country_name: "Africa", country_image: "thumb11.jpg" },
    { id: 6, name: "Nairobi", country_id: 3, country_name: "Kenya", country_image: "thumb10.jpg" },
    { id: 7, name: "Nakuru", country_id: 3, country_name: "Kenya", country_image: "thumb10.jpg" },
    { id: 8, name: "Mombasa", country_id: 3, country_name: "Kenya", country_image: "thumb10.jpg" }
];

Заранее спасибо.

Answer 1

Можно использовать функцию map и коллекцию Map для получения желаемой страны:

const uniqueCountries = new Map(countries.map(s => [s.id, s]));
const result = cities.map(s => ({ ...s, 
    country_name: uniqueCountries.get(s.country_id).name }));

Пример:

let countries = [
    { id: 1, name: 'India', image: 'thumb15.jpg' },
    { id: 2, name: 'Africa', image: 'thumb11.jpg' },
    { id: 3, name: 'Kenya', image: 'thumb10.jpg' }
];

let cities = [
    { id: 1, name: 'Ahmedabad', country_id: 1 },
    { id: 2, name: 'Vadodara', country_id: 1 },
    { id: 3, name: 'Cairo', country_id: 2 },
    { id: 4, name: 'Kinshasa', country_id: 2 },
    { id: 5, name: 'Luanda', country_id: 2 },
    { id: 6, name: 'Nairobi', country_id: 3 },
    { id: 7, name: 'Nakuru', country_id: 3 },
    { id: 8, name: 'Mombasa', country_id: 3 },
];

 const uniqueCountries = new Map(countries.map(s => [s.id, s]));
 const result = cities.map(s => ({ ...s, 
     country_name: uniqueCountries.get(s.country_id).name }));
 console.log(result);

ОБНОВЛЕНИЕ:

map метод создает новый массив из вызывающего массива , Кроме того, вы можете добавить новые свойства к вашему объекту, который вы хотите:

let countries = [
    { id: 1, name: 'India', image: 'thumb15.jpg' },
    { id: 2, name: 'Africa', image: 'thumb11.jpg' },
    { id: 3, name: 'Kenya', image: 'thumb10.jpg' }
];

const countriesWithShortCountryNames = countries.map(s=> ({...s, 
   shortName: s.name.substring(0, 3)}))
console.log(countriesWithShortCountryNames)

Коллекция карт:

Объект Map содержит пары ключ-значение и запоминает исходный порядок вставки ключей .

Answer 2

Вы можете взять таблицу ha sh для всех элементов countries, где id - ключ, а значение - новый объект в требуемом формате.

{
    1: {
        country_name: "India",
        image: "thumb15.jpg"
    },
    2: {
        country_name: "Africa",
        image: "thumb11.jpg"
    },
    3: {
        country_name: "Kenya",
        image: "thumb10.jpg"
    }
}

Затем отобразите новые объекты с исходным ключом / значением и новыми свойствами из таблицы ha sh.

Используемые методы в порядке появления:

• Array#reduce
• назначение деструктурирования с присвоением имени новой переменной
• Array#map

var countries = [{ id: 1, name: 'India', image: 'thumb15.jpg' }, { id: 2, name: 'Africa', image: 'thumb11.jpg' }, { id: 3, name: 'Kenya', image: 'thumb10.jpg' }],
    cities = [{ id: 1, name: 'Ahmedabad', country_id: 1 }, { id: 2, name: 'Vadodara', country_id: 1 }, { id: 3, name: 'Cairo', country_id: 2 }, { id: 4, name: 'Kinshasa', country_id: 2 }, { id: 5, name: 'Luanda', country_id: 2 }, { id: 6, name: 'Nairobi', country_id: 3 }, { id: 7, name: 'Nakuru', country_id: 3 }, { id: 8, name: 'Mombasa', country_id: 3 }],
    countriesH = countries.reduce((r, { id, name: country_name, ...o }) =>
        (r[id] = { country_name, ...o }, r), {}),
    result = cities.map(o => ({ ...o, ...countriesH[o.country_id] }));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Я написал библиотеку (которая эмулирует do tnet linq), которая делает это бризом:

import { blinq } from "blinq";
//...    
const joinedData = blinq(countries)
  .join(
    cities,
    co => co.id,
    ci => ci.country_id,
    (country, city) => ({ country, city })
  )
  .toArray();

const {
  blinq
} = window.blinq;

const countries = [{
    id: 1,
    name: "India",
    image: "thumb15.jpg"
  },
  {
    id: 2,
    name: "Africa",
    image: "thumb11.jpg"
  },
  {
    id: 3,
    name: "Kenya",
    image: "thumb10.jpg"
  }
];

const cities = [{
    id: 1,
    name: "Ahmedabad",
    country_id: 1
  },
  {
    id: 2,
    name: "Vadodara",
    country_id: 1
  },
  {
    id: 3,
    name: "Cairo",
    country_id: 2
  },
  {
    id: 4,
    name: "Kinshasa",
    country_id: 2
  },
  {
    id: 5,
    name: "Luanda",
    country_id: 2
  },
  {
    id: 6,
    name: "Nairobi",
    country_id: 3
  },
  {
    id: 7,
    name: "Nakuru",
    country_id: 3
  },
  {
    id: 8,
    name: "Mombasa",
    country_id: 3
  }
];

const joinedData = blinq(countries)
  .join(
    cities,
    co => co.id,
    ci => ci.country_id,
    (country, city) => ({
      country,
      city
    })
  )
  .toArray();

console.log(JSON.stringify(joinedData, null, 2))

<script src="https://cdn.jsdelivr.net/npm/blinq"></script>