显示带有php和JSON下拉列表的项目

Question

我有一个尺寸表，我只想在那个尺寸的描述旁边显示一个结果。

示例：如果id为01，我想输出B + C，但那是使用CSV而不是我制作的JSON文件！

如何让php只显示＆＃34; ID＆＃34;：＆＃34; 01＆＃34;项目

然后只显示来自＆＃34; name＆＃34;的值而且只是来自＆＃34; 2xs＆＃34;

第三，下拉选择另一个大小，然后它会显示。

到目前为止，我已将CSV转换为JSON文件，但我不了解如何输出数据。

{
  "ID": "01",
  "name": "Height",
  "2XS": 66,
  "XS": 68,
  "S": 70,
  "M": 72,
  "L": 74,
  "XL": 76,
  "2XL": 78,
  "3XL": 80,
  "4XL": 82,
  "5XL": "",
  "6XL": "",
  "7XL": "",
  "8XL": "",
  "9XL": "",
  "10XL": ""
}

这就是我在php方面的目标：

<?php
$json=file_get_contents("/sizes.json");
$result = json_decode(true);

print_r($result);
?>

以下是我希望如何显示的示例：

Answer 1

您的问题不是很明确，但只需显示您提到的对象属性即可：

<?php
// Get file and decode.
$json=file_get_contents("/sizes.json");
$result = json_decode($string, true);

// Access specific object properties.
$id = $result->ID;
$name = $result->name;
$size = $result->{'2XS'};

// Outputs '01 Height 66'
echo $id . ' ' . $name . ' ' . $size;
?>

Answer 2

如果图表与HTML

在同一页面，则不需要PHP

我在这里使用jQuery作为例子。

＆＃13;

＆＃13;

var item = {
"ID": "01",
  "sizes" :  {
"Height":          { "2XS": 66,"XS": 68,"S": 70,"M": 72,"L": 74,"XL": 76,"2XL": 78,"3XL": 80,"4XL": 82,"5XL": ""},
"Width under arm": { "2XS": 46,"XS": 68,"S": 70,"M": 72,"L": 74,"XL": 76,"2XL": 78,"3XL": 80,"4XL": 82,"5XL": ""},
"Bottom width":    { "2XS": 46,"XS": 68,"S": 70,"M": 72,"L": 74,"XL": 76,"2XL": 78,"3XL": 80,"4XL": 82,"5XL": ""},
"Neck openeing":   { "2XS": 46,"XS": 68,"S": 70,"M": 72,"L": 74,"XL": 76,"2XL": 78,"3XL": 80,"4XL": 82,"5XL": ""},
"Arm openeing":    { "2XS": 18,"XS": 68,"S": 70,"M": 72,"L": 74,"XL": 76,"2XL": 78,"3XL": 80,"4XL": 82,"5XL": ""} // no comma
  }
}

  /* the above could be
    $.get("items.php?id=01",function(data) {
      var item = JSON.parse(data); // not necessary to parse if the server returns aplicate/json
    });
  */

var names = {
  "2XS": "XX Small",
  "XS": "X Small",
  "S": "Small",
  "M": "Medium",
  "L": "Large",
  "XL": "X large",
  "2XL": "XX Large",
  "3XL": "XXX Large",
  "4XL": "XXXX Large",
  "5XL": "XXXXX Large"
}
$(function() {
  var $sel = $("#sel1"); // cache the object for reuse
  $.each(item.sizes.Height, function(key, val) { // create the select from the object above - I use the Height list of sizes
    if (val) { // ignore empty sizes
      $sel.append($('<option/>', {
        "value": key,
        "text": names[key]
      }));
    }
  });
  $sel.on("change", function() {
    process(this.value); // pass select value to process
  }).change(); // trigger the current selection 
});

function process(aSize) { // passes XS ... 5XL
  var $table = $("#sizeTable").empty();
  $.each(item.sizes, function(key, val) { // loop over height, width, 
    $table.append('<tr><td class="nameCell">' + key + '</td><td class="sizeCell">' + val[aSize] + ' cm</td></tr>')
  });
}

＆＃13;

.nameCell {
  font-weight: bold;
  padding-right: 5px;
}
.sizeCell {
  font-style: italic;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel1"></select>
<table>
  <tbody id="sizeTable"></tbody>
</table>

＆＃13;

＆＃13;

＆＃13;