目前在使用JSON解析时丢失了

时间:2017-07-19 18:43:17

标签: json

我目前在使用JSON解析时迷失了方向。不确定初学者的错误还是我目前正在制定的一些规则。

HTML:

 <form action="" method="POST">
   <button type="button" class="btn btn-default btn-md" id="button" name="hub">PC Hub</button>
   <button type="button" class="btn btn-success btn-md" id="button" name="dquest">DynaquestPC</button>
</form>

<table>
   <tr>
      <td>CPU</td>
      <td>
         <p id="1800xName"></p>
      </td>
      <td id="alignRight">
         <p id="1800xPrice"></p>
      </td>
   </tr>

   <tr>
      <td>CPU Cooler</td>
      <td>
         <p id="CoolerName"></p>
      </td>
      <td id="alignRight">
         <p id="CoolerPrice"></p>
      </td>
   </tr>
   <tr>
      <td>RAM</td>
      <td>
         <p id="4x4Name"></p>
      </td>
      <td id="alignRight">
         <p id="4x4Price"></p>
      </td>
   </tr>

   <tr>
      <td>SSD</td>
      <td>
         <p id="EvoName"></p>
      </td>
      <td id="alignRight">
         <p id="EvoPrice"></p>
      </td>
   </tr>

   <tr>
      <td>HDD</td>
      <td>
         <p id="WDBName"></p>
      </td>
      <td id="alignRight">
         <p id="WDBPrice"></p>
      </td>
   </tr>

   <tr>
      <td>Power Supply</td>
      <td>
         <p id="M12Name"></p>
      </td>
      <td id="alignRight">
         <p id="M12Price"></p>
      </td>
   </tr>
</table>

JS:

var CPUs = '{"CPU": [' +
   '{"Name":"Ryzen 7 1800X","Price":27000 },' +
   '{"Name":"Ryzen 7 1700X","Price":20700 },' +
   '{"Name":"Ryzen 7 1700","Price":17000 },' +
   '{"Name":"Ryzen 5 1600X","Price":12770 },' +
   '{"Name":"Ryzen 5 1600","Price":11120 },' +
   '{"Name":"Ryzen 5 1500X","Price":9780 },' +
   '{"Name":"Ryzen 5 1400","Price":8650 },' +
   '{"Name":"Ryzen 3 1300X","Price":7340 },' +
   '{"Name":"Ryzen 3 1200","Price":6230 },' +

   '{"Name":"Ryzen 7 1800X","Price":27000 },' +
   '{"Name":"Ryzen 7 1700X","Price":20700 },' +
   '{"Name":"Ryzen 7 1700","Price":17000 },' +
   '{"Name":"Ryzen 5 1600X","Price":12770 },' +
   '{"Name":"Ryzen 5 1600","Price":11150 },' +
   '{"Name":"Ryzen 5 1500X","Price":9780 },' +
   '{"Name":"Ryzen 5 1400","Price":8650 },' +
   '{"Name":"Ryzen 3 1300X","Price":0 },' +
   '{"Name":"Ryzen 3 1200","Price":0 }]}';
cpuData = JSON.parse(CPUs);

var CPUCooler = '{"Cooler": [' +
   '{"Name":"Cryorig H7","Price":1900 },' +
   '{"Name":"Cooler Master Hyper 212","Price":1850 }]}';
coolerData = JSON.parse(CPUCooler);

var RAM = '{"RAM": [' +
   '{"Name":"4x4GB GSkill Ripjaws 2666MHz","Price":7970 },' +
   '{"Name":"2x4GB Kingston HyperX Fury 2400MHz","Price":4060 },' +

   '{"Name":"4x4 Corsair Vengeance LPX 2800MHz","Price":7650 },' +
   '{"Name":"2x4 GSkill Ripjaws V 2800MHz","Price":4090 }]}';
ramData = JSON.parse(RAM);

var ssd = '{"SSD": [' +
   '{"Name":"Samsung 850 EVO 250GB","Price":4740 },' +
   '{"Name":"Western Digital Green 120GB","Price":2890 },' +

   '{"Name":"Samsung 850 EVO 250GB","Price":4900 },' +
   '{"Name":"Western Digital Green 120GB","Price":2900 }]}';
ssdData = JSON.parse(ssd);

var hdd = '{"HDD": [' +
   '{"Name":"WD Caviar Blue 1TB","Price":2350 },' +
   '{"Name":"Seagate Skyhawk 1TB","Price":2640 },' +

   '{"Name":"WD Caviar Blue 1TB","Price":2350 },' +
   '{"Name":"Seagate Barracuda 1TB","Price":2490 }]}';
hddData = JSON.parse(hdd);

var psu = '{"PSU": [' +
   '{"Name":"Seasonic G550","Price":4170 },' +
   '{"Name":"Seasonic M12ii-520","Price":3460 },' +
   '{"Name":"Seasonic S12ii-520","Price":2780 },' +

   '{"Name":"Seasonic G550","Price":4350 },' +
   '{"Name":"Seasonic M12ii-520","Price":3350 },' +
   '{"Name":"Seasonic S12ii-520","Price":2850 }]}';
psuData = JSON.parse(psu);

document.getElementsByName("hub")[0].addEventListener("click", function() {
   document.getElementById("1800xName").innerHTML = cpuData.CPU[0].Name;
   document.getElementById("1800xPrice").innerHTML = parseInt(cpuData.CPU[0].Price).toLocaleString();

   document.getElementById("1700xName").innerHTML = cpuData.CPU[1].Name;
   document.getElementById("1700xPrice").innerHTML = parseInt(cpuData.CPU[1].Price).toLocaleString();

   document.getElementById("1700Name").innerHTML = cpuData.CPU[2].Name;
   document.getElementById("1700Price").innerHTML = parseInt(cpuData.CPU[2].Price).toLocaleString();

   document.getElementById("1600Name").innerHTML = cpuData.CPU[3].Name;
   document.getElementById("1600Price").innerHTML = parseInt(cpuData.CPU[3].Price).toLocaleString();

   document.getElementById("1600Name").innerHTML = cpuData.CPU[4].Name;
   document.getElementById("1600Price").innerHTML = parseInt(cpuData.CPU[4].Price).toLocaleString();

   document.getElementById("1500xName").innerHTML = cpuData.CPU[5].Name;
   document.getElementById("1500xPrice").innerHTML = parseInt(cpuData.CPU[5].Price).toLocaleString();

   document.getElementById("1400Name").innerHTML = cpuData.CPU[6].Name;
   document.getElementById("1400Price").innerHTML = parseInt(cpuData.CPU[6].Price).toLocaleString();

   document.getElementById("CoolerName").innerHTML = coolerData.Cooler[0].Name;
   document.getElementById("CoolerPrice").innerHTML = parseInt(coolerData.Cooler[0].Price).toLocaleString();

   document.getElementById("4x4Name").innerHTML = ramData.RAM[0].Name;
   document.getElementById("4x4Price").innerHTML = parseInt(ramData.RAM[0].Price).toLocaleString();

   document.getElementById("2x4Name").innerHTML = ramData.RAM[1].Name;
   document.getElementById("2x4Price").innerHTML = parseInt(ramData.RAM[1].Price).toLocaleString();

   document.getElementById("EvoName").innerHTML = ssdData.SSD[0].Name;
   document.getElementById("EvoPrice").innerHTML = parseInt(ssdData.SSD[0].Price).toLocaleString();

   document.getElementById("WDGName").innerHTML = ssdData.SSD[1].Name;
   document.getElementById("WDGPrice").innerHTML = parseInt(ssdData.SSD[1].Price).toLocaleString();

   document.getElementById("WDBName").innerHTML = hddData.HDD[0].Name;
   document.getElementById("WDBPrice").innerHTML = parseInt(hddData.HDD[0].Price).toLocaleString();

   document.getElementById("SeaName").innerHTML = hddData.HDD[1].Name;
   document.getElementById("SeaPrice").innerHTML = parseInt(hddData.HDD[1].Price).toLocaleString();

   document.getElementById("G550Name").innerHTML = psuData.PSU[0].Name;
   document.getElementById("G550Price").innerHTML = parseInt(psuData.PSU[0].Price).toLocaleString();

   document.getElementById("M12Name").innerHTML = psuData.PSU[1].Name;
   document.getElementById("M12Price").innerHTML = parseInt(psuData.PSU[1].Price).toLocaleString();

   document.getElementById("S12Name").innerHTML = psuData.PSU[2].Name;
   document.getElementById("S12Price").innerHTML = parseInt(psuData.PSU[2].Price).toLocaleString();
});

document.getElementsByName("dquest")[0].addEventListener("click", function() {
   document.getElementById("1800xName").innerHTML = cpuData.CPU[9].Name;
   document.getElementById("1800xPrice").innerHTML = parseInt(cpuData.CPU[9].Price).toLocaleString();

   document.getElementById("1700xName").innerHTML = cpuData.CPU[10].Name;
   document.getElementById("1700xPrice").innerHTML = parseInt(cpuData.CPU[10].Price).toLocaleString();

   document.getElementById("1700Name").innerHTML = cpuData.CPU[11].Name;
   document.getElementById("1700Price").innerHTML = parseInt(cpuData.CPU[11].Price).toLocaleString();

   document.getElementById("1600Name").innerHTML = cpuData.CPU[12].Name;
   document.getElementById("1600Price").innerHTML = parseInt(cpuData.CPU[12].Price).toLocaleString();

   document.getElementById("1500xName").innerHTML = cpuData.CPU[13].Name;
   document.getElementById("1500xPrice").innerHTML = parseInt(cpuData.CPU[13].Price).toLocaleString();

   document.getElementById("1400Name").innerHTML = cpuData.CPU[14].Name;
   document.getElementById("1400Price").innerHTML = parseInt(cpuData.CPU[14].Price).toLocaleString();

   document.getElementById("CoolerName").innerHTML = coolerData.Cooler[1].Name;
   document.getElementById("CoolerPrice").innerHTML = parseInt(coolerData.Cooler[1].Price).toLocaleString();

   document.getElementById("4x4Name").innerHTML = ramData.RAM[2].Name;
   document.getElementById("4x4Price").innerHTML = parseInt(ramData.RAM[2].Price).toLocaleString();

   document.getElementById("2x4Name").innerHTML = ramData.RAM[3].Name;
   document.getElementById("2x4Price").innerHTML = parseInt(ramData.RAM[3].Price).toLocaleString();

   document.getElementById("EvoName").innerHTML = ssdData.SSD[2].Name;
   document.getElementById("EvoPrice").innerHTML = parseInt(ssdData.SSD[2].Price).toLocaleString();

   document.getElementById("WDGName").innerHTML = ssdData.SSD[3].Name;
   document.getElementById("WDGPrice").innerHTML = parseInt(ssdData.SSD[3].Price).toLocaleString();

   document.getElementById("WDBName").innerHTML = hddData.HDD[2].Name;
   document.getElementById("WDBPrice").innerHTML = parseInt(hddData.HDD[2].Price).toLocaleString();

   document.getElementById("SeaName").innerHTML = hddData.HDD[3].Name;
   document.getElementById("SeaPrice").innerHTML = parseInt(hddData.HDD[3].Price).toLocaleString();

   document.getElementById("G550Name").innerHTML = psuData.PSU[3].Name;
   document.getElementById("G550Price").innerHTML = parseInt(psuData.PSU[3].Price).toLocaleString();

   document.getElementById("M12Name").innerHTML = psuData.PSU[4].Name;
   document.getElementById("M12Price").innerHTML = parseInt(psuData.PSU[4].Price).toLocaleString();

   document.getElementById("S12Name").innerHTML = psuData.PSU[5].Name;
   document.getElementById("S12Price").innerHTML = parseInt(psuData.PSU[5].Price).toLocaleString();
});

我似乎也找不到错误代码,因为它是一个网页。谁知道如何解决?现在很丢失

0 个答案:

没有答案