create simple js object and store them into js array

Question

Inside html dom I have following structure

<div id="myTitles">
<ul>
  <li>
      Title:<title>A</title><br>
      Second title: <secTitle>B</secTitle><br>
      Third title: <thirdTitle>3</thirdTitle>
  </li>
  <hr>
  <li>
      Title:<title>B</title><br>
      Second title: <secTitle>C</secTitle><br>
      Third title: <thirdTitle>9</thirdTitle>
  </li>   
</ul>
</div>

Number of list elements inside ul of myTitles div is unknown on runtime. So I'm taking var nrOfTitles = $('#myTitles ul li').length; to determine how many is there.

Now, I want to create some simple javascript object which will hold those values (stored inside this semantic tags (title, secTitle, thirdTitle)) and store them inside js array.

Your 'semantic tags' don't appear to be real tags, which may (or may not) cause problems later. Given the (invalid) HTML you have in your question, what specific end-result do you want? — David Thomas
– David Thomas, Commented Mar 28, 2015 at 17:15
You shouldn't use those semantic tags at least for the moment in current HTML browsers and upcoming updates in one year at least — user4396006
– user4396006, Commented Mar 28, 2015 at 17:16
sounds like a good idea at the moment. ok, thank you. What do you suggest, how to divide them. — user1765862
– user1765862, Commented Mar 28, 2015 at 17:17
@user1765862 with any other html conventional tag, depending on the formatting you want to show in your web page — user4396006
– user4396006, Commented Mar 28, 2015 at 17:17

nicael · Accepted Answer · 2015-03-28 17:21:38Z

1

var items = $("#myTitles > ul > li");

var arr = [];

items.each(function(){
    arr.push([$(this).find("title").text(),$(this).find("secTitle").text(),$(this).find("thirdTitle").text()])
})

With your current combination of <li>s it would contain:

[["A","B","3"],["B","C","9"]]

Or you can store the properties as objects:

var items = $("#myTitles > ul > li");

var arr = [];

items.each(function(){
    arr.push({title:$(this).find("title").text(),secTitle:$(this).find("secTitle").text(),thirdTitle:$(this).find("thirdTitle").text()})
})

Then you would get

[{title:"A",secTitle:"B",thirdTitle:"3"},{title:"B",secTitle:"C",thirdTitle:"9"}]

edited Mar 28, 2015 at 17:21

answered Mar 28, 2015 at 17:17

nicael

19.1k13 gold badges65 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dirk Over a year ago

I'd personally change the array you're pushing ([$(this).find("title").text(), ... ("thirdTitle").text()]) to an object, like this: {title: $(this).find("title").text() ...

dfsq · Accepted Answer · 2015-03-28 17:31:31Z

You can use $.fn.map method to conveniently create an array of objects:

var obj = $('#myTitles ul li').map(function() {
    return {
        title: $(this).find('title').text(),
        secTitle: $(this).find('secTitle').text(),
        thirdTitle: $(this).find('thirdTitle').text()
    };
}).get();

alert(JSON.stringify(obj, null, 4));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myTitles">
<ul>
  <li>
      Title:<title>A</title><br>
      Second title: <secTitle>B</secTitle><br>
      Third title: <thirdTitle>3</thirdTitle>
  </li>
  <hr>
  <li>
      Title:<title>B</title><br>
      Second title: <secTitle>C</secTitle><br>
      Third title: <thirdTitle>9</thirdTitle>
  </li>   
</ul>
</div>

But since you are using custom tags in HTML, remember to create them for IE8, if you plan so support this browser, like document.createElement('title');.

Collectives™ on Stack Overflow

create simple js object and store them into js array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related