'注文'と '商品'の配列を比較し、商品名を注文した場合は印刷しますか？

Question

私は、製品の配列を持っている：

const products = { 
    { 
     id: item1, 
     name: 'My product', 
     price: 100 
    }, 
    { 
     id: item2, 
     name: 'My other product', 
     price: 200 
    }, 
    { 
     id: item3, 
     name: 'My other other product', 
     price: 150 
    } 
} 

私も順番にであるとどのように多くの製品と言う順序状態を持っています。この例では1 ITEM1とITEM2 2が順にあります：

const orderState = { 
    item1: 1, 
    item2: 2 
} 

は、どのように私は順序で倍ののprodcut名と番号をレンダリングすることができますか？私はReactを使用していますが、私はvanilla JSがこのソリューションに必要なものだと思います。

私のHTML出力は次のようにする必要がある：

<ul> 
<li>My product x1 = $1</li> 
<li>My other product x2 = $4</li> 
</ul> 

Answer 1

あなたのデータはあなたに困難を与えているように見えるものですを格納だ道。まず、製品の配列の実際の配列ますまた

const products = [ 
    { 
     id: item1, 
     name: 'My product', 
     price: 100 
    }, //... 
]; 

を、そのitem1値は何ですか？それは整数のような、ある種の実際のIDですか？これは後で製品を識別するために使用します。

次に、「注文状態」に対して、商品への参照配列を保持するオブジェクトを作成します。

const orderState = { 
    products: [ 
     { 
      productID: item1, 
      quantity: 1 
     }, 
     { 
      productID: item2, 
      quantity: 2 
     } 
    ] 
} 

これでより合理的なデータ構造が得られたので、その構造でより簡単に操作できます。出力を構築するにはさまざまな方法があります。どのように行うかは、使用している他のツール（テンプレートエンジンなど）に大きく依存する場合があります。しかし、単にロジックを示すために、のは、単純な文字列を作成してみましょう：

var output = '<ul>'; 

for (var i = 0; i < orderState.products.length; i++) { 

    var product = {}; 
    for (var j = 0; j < products.length; j++) { 
     if (products[j].id == orderState.products[i].id) { 
      product = products[j]; 
      break; 
     } 
    } 

    output += '<li>' + product.name + ' x' + orderState.products[i].quantity + ' = $' + (product.price * orderState.products[i].quantity) + '</li>'; 
} 

output += '</ul>'; 

をこのことから、あなたがリファクタリングし、必要に応じて改善することができます。たとえば、idに基づいて製品を見つけるロジックは、独自の機能に抽出することも、組み込みのJavaScript機能やフレームワーク機能を使用して1つのライナーに縮小することもできます。 （underscore.jsはそのような機能には良いです。）しかし、基本的な考え方は、データ構造を分かりやすく整理することです。そして、それらの構造で動作するコードは簡単になります。

Answer 2

以下の解決策では、お客様の質問文ごとに選択した製品の名前を取得できます。

let productsOrderedIds = Object.keys(orderState); 
let proNames = []; 
for(let pro of products) { 
    if(productsOrderedIds.indexOf(pro.id) !== -1){ 
     proNames.push(pro.name); 
    } 
} 
console.log(proNames);