JQuery - create array object by taking html elements,attributes on click

Question

As you can see below I have a sample JSON array object. That's how I want the JSON structure to look like at the end. I want the object generated dynamically based on the anchor tags which are inside a list. As you can see, the title is the name (html()) of the anchor tag and URL is the href attribute. So on click of the button create JSON, a function will loop through all the list and its anchor tag and create the object like the sample below. My attempt did not go very far, I was trying to get the html of all anchor tag then get like a.html() for title and a..attr('href') for the link. How would i go about doing this ?

JSON ARRAY OBJECT SAMPLE

[

    {
        "id": "1",

        "Title": "Google",

        "URL": "https://www.google.com"

    },

    {
        "id": "1",

        "Title": "yahoo",

        "URL": "https://www.microsoft.com"

    }

]

HTML

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()})

});

}

<!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>

sense you only want the url and text, why not use the class "addlink-a" in your jquery? $("#addlink-a").each(function(a) { .... }); — Keith Aymar
– Keith Aymar, Commented Mar 20, 2018 at 21:22
@KeithAymar oh ya i din think about that. they are all going to be dynamically listed, so i am hoping all them have the same class name — jsPlayer
– jsPlayer, Commented Mar 20, 2018 at 21:25
@KeithAymar You probably mean $(".addlink-a").each(function(a) { .... }); — fpierrat
– fpierrat, Commented Mar 20, 2018 at 21:33

Taplar · Accepted Answer · 2018-03-20 21:23:53Z

I'm not sure what you want id to be?

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>

yajiv · Accepted Answer · 2018-03-20 21:28:40Z

Try this.

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>

Murad Sofiyev · Accepted Answer · 2018-03-20 21:31:44Z

0

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")}
  })
}

if I understand correctly your function look like this

answered Mar 20, 2018 at 21:31

Murad Sofiyev

7911 gold badge8 silver badges27 bronze badges

Comments

Stphane · Accepted Answer · 2018-03-20 21:45:41Z

0

You have to look for each element attributes collection. Your function could accept a given selector and return an array of objects containing attributes for all elements that matched the selector:

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'));

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

edited Mar 20, 2018 at 21:45

answered Mar 20, 2018 at 21:40

Stphane

3,4765 gold badges36 silver badges49 bronze badges

1 Comment

Stphane Over a year ago

This solution is dynamic, meaning it will grad ALL attributes for every element that matches the selector. Plus it does not rely on jQuery.

Collectives™ on Stack Overflow

JQuery - create array object by taking html elements,attributes on click

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related