如何在Javascript JSON對象賦給一個值

-1

所以我有一個JSON文件，其中包含：
如何在Javascript JSON對象賦給一個值

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

而且我想利用這些信息從JSON填補到產品變種= {}，並填寫：

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

根據他們在索引頁上的下拉菜單中選擇什麼選項。現在，我將產品信息硬編碼到switch case語句中，但我知道這不會是最好的。

我不知道我怎樣才能從JSON的值並插入下開關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;  
    } 
} 
}

來源

2017-05-11 Jake

我很困惑。如果你拋棄並忽略了所有你通過覆蓋它而帶來的數據，爲什麼要把它帶入？你想做什麼具體？ – Brad

@Brad只有三種產品，我不會介意數據中的硬編碼，但是我想知道當我必須合併大量數據（比如50多種產品）時我該怎麼辦。 – Jake

當然，但爲什麼你想要這個開關/外殼？這沒有理由。你的問題是關於分配數據，但你可能不想分配任何東西......你只需要從產品中讀取數據，對吧？如果是這樣，只需將選項值設置爲陣列中產品的索引並從那裏開始。 – Brad

按我的理解，你想這兩個東西：

綁定json數據ng-repeat以顯示選擇選項來自JSON。
對select您想獲得selected項目的整個對象。

DEMO

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>

來源

2017-05-11 04:53:41

如何在Javascript JSON對象賦給一個值

回答

相關問題