Question

如下所示，我有一个示例JSON数组对象。这就是我希望JSON结构在最后的样子。我想要根据列表中的锚标记动态生成对象。如您所见，标题是锚标记的名称（html（）），URL是href属性。因此，当单击按钮创建JSON时，函数将循环遍历所有列表及其锚标记并创建对象，如下面的示例。我的尝试没有走得太远，我试图得到所有锚标签的html然后得到像标题的a.html（）和链接的a..attr（＆＃39; href＆＃39;）。我该怎么做呢？

JSON ARRAY OBJECT SAMPLE

＆＃13;

[

    {
        "id": "1",

        "Title": "Google",

        "URL": "https://www.google.com"

    },

    {
        "id": "1",

        "Title": "yahoo",

        "URL": "https://www.microsoft.com"

    }

]

＆＃13;

HTML 的

＆＃13;

function createJson() {
var linkjson=[];
var listItemsA = $(".addlink_dynlist > li").find('a');
listItemsA.each(function(a) {
console.log(a);
    //linkjson.push({id:1,Title:a.html()})

});

}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">

    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.google.com/">google</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.yahoo.com/">yahoo</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.cnn.com/">cnn</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="http://www.foxnews.com/">fox</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
  </div>
  
  <button onclick="createJson()">Create json</button>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

＆＃13;

Answer 1

我不确定你想要的是什么？

function createJson() {
  var linkjson = $(".addlink_dynlist > li a").map((index, a) => {
    return { id: a.id, Title: a.innerText, URL: a.href };
  }).get();
  console.log(linkjson);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">

    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.google.com/">google</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.yahoo.com/">yahoo</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.cnn.com/">cnn</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="http://www.foxnews.com/">fox</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
  </div>
  
  <button onclick="createJson()">Create json</button>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

Answer 2

试试这个。

function createJson() {
  var linkjson=[];
  var listItemsA = $(".addlink_dynlist > li").find('a');
  listItemsA.each(function(a) {
       var x={};
       x.id=1;
       x.title=$(listItemsA[a]).html();
       x.url=$(listItemsA[a]).attr('href');
      linkjson.push(x)
  });
  console.log(linkjson);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


</head>

<body>
<div class="input_fields_wrap" style="overflow-y: hidden;">

    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.google.com/">google</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.yahoo.com/">yahoo</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="https://www.cnn.com/">cnn</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
    <div class="addlink_dynlist">
      <li>
        <a class="addlink-a" href="http://www.foxnews.com/">fox</a>
        <span class="show_field" hidden="">
          <i class="fa fa-times addlink_dynlistX remove_field hand-cursor "></i>|
          <i class="fa fa-pencil-square-o addlink-edit-icon hand-cursor" aria-hidden="true">Edit</i>
        </span>
      </li>
    </div>
  </div>
  
  <button onclick="createJson()">Create json</button>
  
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

  <script src="./js/test.js"></script>

</body>

</html>

Answer 3

window.createJson = function createJson() {
    var linkjson=[];
    var listItemsA = $(".addlink_dynlist > li a")
  linkjson = listItemsA.map(function(index, node) {
     var $node = $(node);
     return {id: index, text:$node.text(), URL: $node.attr("href")}
  })
}

如果我理解正确，你的功能就像这样

Answer 4

您必须查找每个元素属性集合。您的函数可以接受给定的选择器并返回包含与选择器匹配的所有元素的属性的对象数组：

＆＃13;

function createJson(selector) {
  var linkjson=[];
  Array
    // Grad HTMLElements
    .from(document.querySelectorAll(selector))
    // Only keep attribute collections
    .map(x => x.attributes)
    // Add a new entry to linkjson for each element
    .forEach(at => {
      let item;
      linkjson[linkjson.length] = {};
      item = linkjson[linkjson.length-1];
      Array.from(at).forEach(a => (item[a.name] = a.value) );
  });
  return linkjson
}

console.log(createJson('.target'));

＆＃13;

<p title="test1" class="target" id="theId1">Element1</p>
<p title="test2" class="target" id="theId2">Element2</p>
<p title="test3" class="target" id="theId3" data-test="3">Element3</p>

＆＃13;

JQuery - 通过获取html元素，点击属性来创建数组对象

4 个答案: