需要匹配的JSON文件

Question

我是JSON和JS的新手，我希望有人能幫助我。我正在處理兩個單獨的JSON文件。配方JSON文件具有ID字段和成分編號字段。在我的第二個JSON文件中，我需要匹配來自第一個JSON文件的成分編號與第二個JSON文件中名爲itemFullUPC的相應字段。如果字段中有匹配項，我需要將第一個JSON文件中與正確的itemUPC對應的itemName替換爲無序列表中頁面上顯示的當前compositionNum。以下是數據庫和我的代碼。希望有人能幫助我！

配方JSON示例：

[ 
    { 
      "recipeName":"Test", 
      "id":"10",  
      "ingredients":[ 
      { 
       "ingredientNum":"070796501104", 
       "ingredientMeasure":"1 bottle", 
       "ingredientMisc1":"(33.8 fl oz)" 
      }, 
      { 
       "ingredientNum":"070796000164", 
       "ingredientMeasure":"1/2 cup", 
       "ingredientMisc1":"" 
      } 
      ] 
    } 
] 

產品JSON示例：

[ 
     { 
       "productName":"Tomatoes", 
       "itemFullUPC":"070796501104" 
     }, 
     { 
       "productName":"Cherries", 
       "itemFullUPC":"070796000164" 
     } 
] 

例如，在第二數據庫中。名爲「Cherry」的productName在第一個數據庫中具有相同的編號，我需要使用項目名稱替換頁面上當前生成的列表。

期望輸出

• 6-8盎司070796501104將成爲6-8盎司西紅柿
• 1/4茶匙070796000164將成爲1-4茶匙櫻桃

我需要對整個列表或任何匹配項執行此操作。我在下面的謝謝中包含了我的嘗試。

$(document).ready(function() { 

    'use strict'; 

    $.ajax({ 
     url: 'path to recipeDB', 
     cache: true, 
     success: function(data){ 
      data = data.replace(/\\n/g, "\\n") 
        .replace(/\\'/g, "\\'") 
        .replace(/\\"/g, '\\"') 
        .replace(/\\&/g, "\\&") 
        .replace(/\\r/g, "\\r") 
        .replace(/\\t/g, "\\t") 
        .replace(/\\b/g, "\\b") 
        .replace(/\\f/g, "\\f"); 
      data = data.replace(/[\u0000-\u0019]+/g,""); 

     var json = JSON.parse(data); 

     $.ajax({ 
      dataType: "jsonp", 
      url: 'path to itemDB', 
      cache: true, 
      success: function(itemData){ 
       var product_data = itemData; 

       var productUPC = ''; 
       var productName = ''; 

       $.each(product_data, function(i, item) { 
         productUPC += item.itemFullUPC; 
         productName += item.itemName; 
       }); 

     var ingredients = ''; 

     $.each(json, function(i, item) { 
      if (item.id == "10") { 
       ingredients += '<ul>'; 
       for (var i = 0; i < item.ingredients.length; i++) { 
         ingredients += '<li>' + item.ingredients[i].ingredientMeasure + ' ' + item.ingredients[i].ingredientNum + ' ' + item.ingredients[i].ingredientMisc1 + '</li>'; 
       } 
       ingredients += '</ul>'; 
      } 
     }); 

     $('#recipeIngredients').html(ingredients); 

     } 
     }); 
    } 
    }); 
}); 

我已經成功地列表從第一個數據庫工作，但我不知道如何鏈接到第二個數據庫，並從顯示在列表中的項目名稱UPC更改的項目。

Answer 1

您可以使用Array.prototype.map()和Array.prototype.find()

var recipe = [{ 
 
    "recipeName": "Test", 
 
    "id": "10", 
 
    "ingredients": [{ 
 
    "ingredientNum": "070796501104", 
 
    "ingredientMeasure": "1 bottle", 
 
    "ingredientMisc1": "(33.8 fl oz)" 
 
    }, { 
 
    "ingredientNum": "070796000164", 
 
    "ingredientMeasure": "1/2 cup", 
 
    "ingredientMisc1": "" 
 
    }] 
 
}]; 
 

 
var product = [{ 
 
    "productName": "Tomatoes", 
 
    "itemFullUPC": "070796501104" 
 
}, { 
 
    "productName": "Cherries", 
 
    "itemFullUPC": "070796000164" 
 
}]; 
 

 
recipe.ingredients = recipe[0].ingredients.map(function(o) { 
 
    o.ingredientName = product.find(function(p) { 
 
    return p.itemFullUPC === o.ingredientNum; 
 
    }).productName; 
 
    return 0; 
 
}); 
 

 
console.log(recipe);

Answer 2

使用Array.prototype.forEach()和Array.prototype.some()功能的解決方案：

var recipes = [{"recipeName":"Test","id":"10","ingredients":[{"ingredientNum":"070796501104","ingredientMeasure":"1 bottle","ingredientMisc1":"(33.8 fl oz)"},{"ingredientNum":"070796000164","ingredientMeasure":"1/2 cup","ingredientMisc1":""}]}], 
 
    products = [{"productName":"Tomatoes","itemFullUPC":"070796501104"},{"productName":"Cherries","itemFullUPC":"070796000164"}]; 
 

 

 
recipes[0].ingredients.forEach(function (recipe) { 
 
    products.some(function (product) { 
 
     var cond = product.itemFullUPC === recipe.ingredientNum; 
 
     if (cond) { 
 
      recipe.ingredientNum = product.productName; 
 
     } 
 
     return cond; 
 
    }); 
 
}); 
 

 
console.log(recipes);

現在

，您可以通過配方成分迭代，並填補了無序列表

Answer 3

假設你有食譜的數組，你可以重新映射數組是這樣的：

var recipes = [{ 
 
    "recipeName": "Test", 
 
    "id": "10", 
 
    "ingredients": [{ 
 
    "ingredientNum": "070796501104", 
 
    "ingredientMeasure": "1 bottle", 
 
    "ingredientMisc1": "(33.8 fl oz)" 
 
    }, { 
 
    "ingredientNum": "070796000164", 
 
    "ingredientMeasure": "1/2 cup", 
 
    "ingredientMisc1": "" 
 
    }] 
 
}] 
 
var ingredients = [{ 
 
    "productName": "Tomatoes", 
 
    "itemFullUPC": "070796501104" 
 
}, { 
 
    "productName": "Cherries", 
 
    "itemFullUPC": "070796000164" 
 
}] 
 

 
recipes = recipes.map(function(recipe) { 
 
    return $.extend(recipe, { 
 
    ingredients: recipe.ingredients.map(function(ingr) { 
 
     return $.extend(ingr, { 
 
     productName: ingredients.find(function(el) { 
 
      return ingr.ingredientNum == el.itemFullUPC; 
 
     }).productName || "" 
 
     }); 
 
    }) 
 
    }); 
 
}); 
 

 
console.log(recipes);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

我會將產品數組更改爲一個對象，以便您不必循環查找產品。如果您可以更改服務器以使用鍵而不是數組返回對象，那將是一種獎勵。

var recipe = [{ 
 
    "recipeName": "Test", 
 
    "id": "10", 
 
    "ingredients": [{ 
 
    "ingredientNum": "070796501104", 
 
    "ingredientMeasure": "1 bottle", 
 
    "ingredientMisc1": "(33.8 fl oz)" 
 
    }, { 
 
    "ingredientNum": "070796000164", 
 
    "ingredientMeasure": "1/2 cup", 
 
    "ingredientMisc1": "" 
 
    }] 
 
}]; 
 

 
var products = [{ 
 
    "productName": "Tomatoes", 
 
    "itemFullUPC": "070796501104" 
 
}, { 
 
    "productName": "Cherries", 
 
    "itemFullUPC": "070796000164" 
 
}]; 
 

 
//change products to object for easier lookup 
 
var prodHash = products.reduce(function(o, item) { 
 
    o[item.itemFullUPC] = item.productName; 
 
    return o; 
 
}, {}); 
 

 
var ingredients = recipe[0].ingredients.map(function(item) { 
 
    return "<li>" + item.ingredientMeasure + (item.ingredientMisc1.length ? " " + item.ingredientMisc1 + " " : " ") + prodHash[item.ingredientNum] + "</li>"; 
 
}).join(""); 
 

 

 
document.getElementById("out").innerHTML = ingredients;

<ul id="out"></ul>

Answer 5

第一旁註：

//these don't do anything, you're literally replacing these strings with the very same strings 
data = data.replace(/\\n/g, "\\n") 
    .replace(/\\'/g, "\\'") 
    .replace(/\\"/g, '\\"') 
    .replace(/\\&/g, "\\&") 
    .replace(/\\r/g, "\\r") 
    .replace(/\\t/g, "\\t") 
    .replace(/\\b/g, "\\b") 
    .replace(/\\f/g, "\\f"); 

//and these should usually not be in the JSON-string 
data = data.replace(/[\u0000-\u0019]+/g, ""); 

這樣的代碼：

$(document).ready(function() { 
    'use strict'; 

    //first let's make the ajax-calls parallel 
    $.when(
     $.ajax({ 
      dataType: "jsonp", 
      url: 'path to recipeDB', 
      cache: true 
     }), 

     $.ajax({ 
      dataType: "jsonp", 
      url: 'path to itemDB', 
      cache: true 
     }) 
    ).then(function(recipes, products){ 

     //now let's convert the products into a more useful structure 
     var productsByUPC = products.reduce(function(acc, item){ 
      acc[ item.itemFullUPC ] = item.productName; 
      return acc; 
     }, {}); 

     //a sinple utility 
     //and don't be shy to use long and speaking names 
     //it's not your task to minify your code, it'the minifiers task 
     //and due to autocompletition one can not even brag about having to much to type 
     function formatIngredientAndAddName(ingredient){ 
      //here it makes no sense to add "ingredient" to each property name 
      //do you think, that `ingredient.ingredientMeasure` 
      //has any benefit over `ingredient.measure` 
      return { 
       name: productsByUPC[ ingredient.ingredientNum ], 
       measure: ingredient.ingredientMeasure, 
       misc: ingredient.ingredientMisc1 
      } 
     }   

     //and clean up the recipes 
     return recipes.map(function(recipe){ 
      return { 
       id: recipe.id, 
       name: recipe.recipeName, 
       ingredients: recipe.ingredients.map(formatIngredientAndAddName) 
      } 
     }); 

    }).then(function(recipes){ 
     //now we have some clean data, containing all we need, 
     //let's create some markup 

     function ingredient2Markup(ingredient){ 
      return '<li>' 
       + ingredient.measure 
       + ' ' 
       + ingredient.name 
       + ' ' 
       + ingredient.misc1 
       + '</li>';     
     } 

     function recipe2Markup(recipe){ 
      return '<ul>' + 
       recipe.ingredients 
        .map(ingredient2Markup) 
        .join("") 
      +'</ul>'; 
     } 

     $('#recipeIngredients').html( 
      recipes.map(recipe2Markup).join("\n") 
     ); 
    }) 
}); 

編輯：

the recipe data set is actually a php file that is formatted as an array so i cant use json p

我在那裏使用jsonp，因爲另一個請求也是jsonp。

<?php 
    //... your php file 

    //json 
    $output = json_encode($yourDataStructure); 
    $contentType = 'application/json'; 

    //optional jsonp output 
    if(!empty($_GET['callback'])){ 
     $contentType = 'application/javascript'; 
     $output = $_GET['callback'] . '(' . $output . ')'; 
    } 

    //setting the correct Content-Type 
    //and will throw if you already started sending something besides 
    header('Content-Type: ' . $contentType); 

    //ensure that this is the last/only thing that is sent to the client 
    exit($output); 
?>