如何在Javascript中将JSON对象分配给值_Javascript_Html_Json

如何在Javascript中将JSON对象分配给值

javascript html json

如何在Javascript中将JSON对象分配给值,javascript,html,json,Javascript,Html,Json,因此，我有一个JSON文件，其中包含：我正试图使用json中的信息来填充var product={}，并填充： product.name product.price product.year product.number 根据他们在索引页面的下拉菜单中选择的选项。现在我将产品信息硬编码到switch case语句中，但我知道这不是最好的我想知道如何根据用户从下拉菜单中选择的内容，从JSON中提取值并将其插入switch case语句下 index.html <!DOCTYPE

因此，我有一个JSON文件，其中包含：

我正试图使用json中的信息来填充var product={}，并填充：

product.name
product.price
product.year
product.number

根据他们在索引页面的下拉菜单中选择的选项。现在我将产品信息硬编码到switch case语句中，但我知道这不是最好的

我想知道如何根据用户从下拉菜单中选择的内容，从JSON中提取值并将其插入switch case语句下

index.html

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Product Select</title>

    <link rel="stylesheet" href="css/style.css">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
        <select name="productList" id="selectedProduct" onchange="productInfo();" >
            <option disabled selected value>Select Item</option>
            <option id="product1" value="product1">Product1</option>
            <option id="product2" value="product2">Product2</option>
            <option id="product3" value="product3">Product3</option>
        </select>

        <button onclick="reset()">Reload page</button>
        <script src="js/index.js"></script>
</body>
</html>

据我所知，你想要这两样东西：

将json数据绑定到ng repeat以显示json中的select选项。在选择时，您希望获取选定项的整个对象。演示

我很困惑。如果您通过覆盖而丢弃并忽略了所有这些数据，那么为什么还要引入这些数据呢？你想具体做什么？@Brad只有三种产品，我不介意在数据中进行硬编码，但我想知道当我必须合并大量数据时，比如50多种产品时，我会怎么做。当然，但你为什么想要这个开关/外壳？这是没有理由的。您的问题询问如何分配数据，但您可能不想分配任何内容。。。你只需要阅读产品，对吗？如果是这样，只需将选项值设置为数组中产品的索引，然后从那里开始。@Brad我需要分配产品信息，因为我尝试执行的可视化操作会根据所选产品的年份值和编号进行更改。不过，您不需要开关/外壳。。。这与你想要的正好相反。而且，您当然不想更改数据。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Product Select</title>

    <link rel="stylesheet" href="css/style.css">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>

<body>
        <select name="productList" id="selectedProduct" onchange="productInfo();" >
            <option disabled selected value>Select Item</option>
            <option id="product1" value="product1">Product1</option>
            <option id="product2" value="product2">Product2</option>
            <option id="product3" value="product3">Product3</option>
        </select>

        <button onclick="reset()">Reload page</button>
        <script src="js/index.js"></script>
</body>
</html>

var product = {};
product.name = null;
product.price = 0;
product.year = 0;
product.number = 0;

// Create a variable with the url to the JSON file
var url"https://gist.githubusercontent.com/jakesterne/e9927b4dfb4ee94717e9fcd7530f33a7/raw/3156be812bbf0decf7f4448d82f6e2f298e95d24/product.json";

var productArray = [];

// Load the json file
d3.json(url2, function(error, data) {
    // Output the first observation to the log
    //console.log(data);

    for(var i in data)
    productArray.push([i, data[i]]);

    console.log(productArray);
});

function produductInfo() {
var productSelection = document.getElementById("selectedProduct");
    var productOption = productSelection.options[productSelection.selectedIndex].value;

    var product1 = document.getElementById("product1").value;
    var product2 = document.getElementById("product2").value;
    var product3 = document.getElementById("product3").value;

    switch (productOption) {
      case "product1":
          product.name = "ProductOne";
          product.price = 10.00;
          product.year = 1990;
          product.number = 2;
        break;

      case "product2":
             ...
        break;

      case "product3":
             ...
        break;

      default:
         product.name = null;
         product.price = 0;
         product.year = 0;
         product.number = 0;      
    }
}
}