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

时间:2019-06-06 13:57:18

标签: javascript jquery html json

我正在寻找一些帮助搜索一个JSON文件的变量,该变量是由4个下拉列表值和一个静态值串联而成的。 即。

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

Fiddle

  • 我从JSON文件中获取值以组成列表,但它们位于顶部的重复数据删除数组中。

  • 是否需要像我一样再次引用getJSON?

我已经写了一些我认为可能接近工作的内容,但是任何帮助将不胜感激!

 $.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)
                                      }
                                    });
                                  });

1 个答案:

答案 0 :(得分:1)

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

您需要删除该最终值,然后循环以获取每种组合的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/