Question

我创建了一个JSON文件mystatsjson.js，其格式如下：

var myJSON = [
  {
    "ProdID": 204,
    "Title": "The best basket in town",
    "FB": 32,
    "Twit": 45
  },
  {
    "ProdID": 201,
    "Title": "The best soap in the whole of US",
    "FB": 23,
    "Twit": 0
  },
  {
    "ProdID": 103,
    "Title": "Limited quantity only",
    "FB": 12,
    "Twit": 3
  },
  and so on]

我想编写一个接收ID参数的jQuery函数，将其与myJSON的ProdID匹配，并检索该ID的FB和Twit的数字。

完成后，它会使用这些数字填充此HTML中的以下<span>。＆＃34; FB＆＃34;的价值将填入fblink的范围，以及＆＃34; Twit＆＃34;将在twitlink的范围内显示：

<div class="displ">
    <a class="button__link" id="fblink" target="_blank" aria-label="">
      <div class="button--small"><div class="button__icon">
        <svg version="1.1" x="0px" y="0px">
            <g>
                <path d="M19"/>
            </g>
        </svg>
          <span></span>
        </div>
      </div>
    </a>

    <a class="button__link" id="twtlink" target="_blank" aria-label="">
      <div class="button--small"><div class="button__icon">
        <svg version="1.1" x="0px" y="0px">
            <g>
                <path d="M23"/>
            </g>
        </svg>
          <span></span>
        </div>
      </div>
    </a>
</div>

我怎样才能做到这一点。另外，如何为FB和Twit提供默认值，因为ID在myJSON中没有匹配？

这就是我的想法，但不知道。

$(document).ready(function(){   
     var clone = $(".displ").clone();
     // query my json file
     clone.find("#fblink").find("span").html(myJSON.FB);
     clone.find("#twtlink").find("span").html(myJSON.Twit);
     $(".displ").append(clone);
});

Answer 1

＆＃13;

var myJSON = [
  {
    "ProdID": 204,
    "Title": "The best basket in town",
    "FB": 32,
    "Twit": 45
  },
  {
    "ProdID": 201,
    "Title": "The best soap in the whole of US",
    "FB": 23,
    "Twit": 0
  },
  {
    "ProdID": 103,
    "Title": "Limited quantity only",
    "FB": 12,
    "Twit": 3
  },
]
$(document).ready(function(){   
          var clone = $(".displ").clone();
          var MYJSON = myJSON.find((elem)=>elem.ProdID=="103")
          // query my json file
        debugger;  clone.find("#fblink").find("span").html(MYJSON.FB);
          clone.find("#twtlink").find("span").html(MYJSON.Twit);
          $(".displ").html(clone);
     });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displ">
    <a class="button__link" id="fblink" target="_blank" aria-label="">
      <div class="button--small"><div class="button__icon">
          <span></span>
        </div>
      </div>
    </a>

    <a class="button__link" id="twtlink" target="_blank" aria-label="">
      <div class="button--small"><div class="button__icon">
          <span></span>
        </div>
      </div>
    </a>
</div>

＆＃13;

检查这是否是您尝试做的。我添加了prodID == 103进行测试。

Answer 2

您可以通过过滤myJSON上的数组，从ProdID获取正确的对象。然后，您可以使用必须将数据附加到DOM的代码。

var myJSON = [{
    "ProdID": 204,
    "Title": "The best basket in town",
    "FB": 32,
    "Twit": 45
  },
  {
    "ProdID": 201,
    "Title": "The best soap in the whole of US",
    "FB": 23,
    "Twit": 0
  },
  {
    "ProdID": 103,
    "Title": "Limited quantity only",
    "FB": 12,
    "Twit": 3
  }
];

function getData(id) {
  return myJSON.find(e => e.ProdID === id);
}

function addToDOM(elem) {
  var clone = $(".displ").clone();
  clone.find("#fblink").html(elem.FB);
  clone.find("#twtlink").html(elem.Twit);
  $(".displ").append(clone);
}


const data = getData(201);
console.log(data);

addToDOM(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displ">
  <a id="fblink" target="_blank"></a>
  <a id="twtlink" target="_blank"></a>
</div>

Answer 3

您可以使用纯 javascript 来实现此目的，无需使用 jQuery 。您必须将输入的ID值与对象 ProdID 值进行比较，如果未找到ID匹配，您可以设置 DefaultValue

var myJSON = [{
    "ProdID": 204,
    "Title": "The best basket in town",
    "FB": 32,
    "Twit": 45
  },
  {
    "ProdID": 201,
    "Title": "The best soap in the whole of US",
    "FB": 23,
    "Twit": 0
  },
  {
    "ProdID": 103,
    "Title": "Limited quantity only",
    "FB": 12,
    "Twit": 3
  }
]

function matchData(ProductID) {
  var item = document.getElementById("displ");
  var cln = item.cloneNode(true);
  document.querySelector("#main").appendChild(cln);


  var MYJSON = myJSON.find((elem) => elem.ProdID == ProductID);
  //console.log(MYJSON);
  if (MYJSON != undefined) {
    cln.querySelector("#fblink span").innerText = MYJSON.FB;
    cln.querySelector("#twtlink span").innerText = MYJSON.Twit;
  } else {
    //console.log("Sorry ID not found");
    cln.querySelector("#fblink span").innerText = "Default Value";
    cln.querySelector("#twtlink span").innerText = "Default Value";
  }
}

matchData(203);
matchData(201);
matchData(204);

body {
  font: 13px Verdana;
}

#displ {
  background: grey;
  margin: 0 0 10px;
  color: white;
  padding: 4px;
}

#main #displ:first-child {
  display: none;
}

<div id="main">
  <div id="displ">
    <a class="button__link" id="fblink" target="_blank" aria-label="">
      <div class="button--small">
        <div class="button__icon">
          <span></span>
        </div>
      </div>
    </a>

    <a class="button__link" id="twtlink" target="_blank" aria-label="">
      <div class="button--small">
        <div class="button__icon">
          <span></span>
        </div>
      </div>
    </a>
  </div>
</div>

查询JSON并检索值

3 个答案: