Question

所以我有一个包含以下内容的JSON文件：

[
  {
    "Name": "ProductOne",
    "Price": 10,
    "Year": 1990,
    "#": 2
  },
  {
    "Name": "ProductTwo",
    "Price": 12,
    "Year": 2000,
    "#": 4
  },
  {
    "Name": "ProductThree",
    "Price": 5,
    "Year": 2014,
    "#": 6
  }
]

我正在尝试使用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>

的script.js

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;      
    }
}
}

Answer 1

根据我的理解，你想要这两件事：

将json数据绑定到ng-repeat以显示JSON中的选择选项。
在select上，您希望获得selected项目的整个对象。

<强>样本

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.jsonObj = [
  {
    "Name": "ProductOne",
    "Price": 10,
    "Year": 1990,
    "#": 2
  },
  {
    "Name": "ProductTwo",
    "Price": 12,
    "Year": 2000,
    "#": 4
  },
  {
    "Name": "ProductThree",
    "Price": 5,
    "Year": 2014,
    "#": 6
  }
];

$scope.selectedProduct = function(product) {
  var result = $scope.jsonObj.filter(item => { return item['#'] == product; });
  console.log(result[0]);
};

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-options="item['#'] as item.Name for item in jsonObj" ng-model="product" ng-change="selectedProduct(product)"></select>
</div>

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

1 个答案: