时间戳

首页 > 解决方案 > 使用 JQuery 从串联输入值的字符串中搜索并返回 JSON 文件值

javascript - 使用 JQuery 从串联输入值的字符串中搜索并返回 JSON 文件值

问题描述

我正在寻找一些帮助来搜索一个 JSON 文件，该文件具有一个由串联的 4 个下拉列表值和一个静态值组成的变量。IE。

DL1   |  DL2 | DL3 |  DL4  |
1000  |  20  | 0.1 | 0.001 |
etc...   
            Minbudget       Concat val to grab Minbudget
10% (0.1):   20000            1000_20_0.1_0.001_0.1
20% (0.2):   30000            1000_20_0.1_0.001_0.2
etc...

我目前正在输出百分比的串联，以查看该功能是否有效（它确实有效）。但我需要做的是使用它作为搜索变量从 JSON 文件中获取 Minbudget 值。

[
  {
    "concatenation": "200000_20_0.001_0.1",
    "audience": 200000,
    "cpic": 20,
    "bcr": 0.001,
    "control": 0.1,
    "Minbudget": 20000
  },
  {
    "concatenation": "200000_20_0.001_0.2",
    "audience": 200000,
    "cpic": 20,
    "bcr": 0.001,
    "control": 0.2,
    "Minbudget": 20000
  },
  {
    "concatenation": "200000_20_0.001_0.3",
    "audience": 200000,
    "cpic": 20,
    "bcr": 0.001,
    "control": 0.3,
    "Minbudget": 20000
  },

小提琴

我已经写了我认为可能接近工作的内容，但任何帮助将不胜感激！

 $.getJSON("https://raw.githubusercontent.com/annielawrencee/incrementalityform/master/power_calc.json", function(obj,tenperconcat) {
                                    $.each(obj, function(key, value) {
                                      if (value.concatenation == tenperconcat ) {
                                        var tenperval = value.Minbudget;
                        $('#tenperbudget').val(tenperval)
                                      }
                                    });
                                  });

标签： javascriptjqueryhtmljson

解决方案

问题是因为您在“连接”中复制了最终值，因此它与您检索的对象数组中的值不匹配。

您需要删除该最终值，然后循环获取每个组合的 10-50% 值。

另请注意，您可以将检索到的对象存储在变量中以供以后参考，因为 AJAX 请求总是在页面加载后立即发出。试试这个：

$(document).ready(function() {
  var data;

  $.getJSON("https://raw.githubusercontent.com/annielawrencee/incrementalityform/master/power_calc.json", function(obj) {
    data = obj;
    var dupaudience = [];
    var dupcpic = [];
    var dupbcr = [];
    var dupcontrol = [];

    $.each(obj, function(key, value) {
      if (dupaudience.indexOf(value.audience) == -1) {
        $("#audience").append("<option value=" + key + ">" + value.audience + "</option>");
        dupaudience.push(value.audience);
      }
      if (dupcpic.indexOf(value.cpic) == -1) {
        $("#cpic").append("<option value=" + key + ">" + value.cpic + "</option>");
        dupcpic.push(value.cpic);
      }

      if (dupbcr.indexOf(value.bcr) == -1) {
        $("#bcr").append("<option value=" + key + ">" + value.bcr + "</option>");
        dupbcr.push(value.bcr);
      }

      if (dupcontrol.indexOf(value.control) == -1) {
        $("#control").append("<option value=" + key + ">" + value.control + "</option>");
        dupcontrol.push(value.control);
      }
    });
  });

  var $outputs = $('.output');

  $('#audience, #cpic, #bcr, #control').on('change', function(obj) {
    var selectedAudience = $('#audience option:selected').text()
    var selectedCpic = $('#cpic option:selected').text()
    var selectedBcr = $('#bcr option:selected').text()
    var selectedControl = $('#control option:selected').text()

    var baseConcat = selectedAudience + "_" + selectedCpic + "_" + selectedBcr + "_0.";
    for (var i = 1; i <= 6; i++) {
      var entities = data.filter(o => o.concatenation === baseConcat + i);
      if (entities.length != 1) {
        console.log('0.' + i + ' not found');
      } else {
        $outputs.eq(i - 1).val(entities[0].Minbudget);
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="audience"></select>
<select id="cpic"></select>
<select id="bcr"></select>
<select id="control"></select>

<p>Control</p>
<p>10%: <input id="tenper" class="output" /></p>
<p><input class="tenperbudget" /></p>
<p>20%: <input id="twentyper" class="output" /></p>
<p>30%: <input id="thirtyper" class="output" /></p>
<p>40%: <input id="fortyper" class="output" /></p>
<p>50%: <input id="fiftyper" class="output" /></p>

这是一个小提琴示例，因为该片段似乎在数据的重压下挣扎：https ://jsfiddle.net/wxqe0Lpu/

推荐阅读