Data from one html to another in JSON jQuery

Question

Looked through the topics but found no full answer.

My task is to fill a drop-down with text from another HTML file. Both HTML files are on localhost. Having data in JSON is a requirement.

Initially, came into following:

$.getJSON("feed.html", function (data) {
        $.each(data, function (index, item) {
            $('#insider').append($('<option</option>').val(item).html(item));
        });
    });

Although, this does not seems to work as getJSON does not seem to operate with html but .json files instead.

Problem is second file has to remain in .html format. Are there any other possibilities how to have whole html text inserted as json without having separate .json file?

It doesn't make sense to get HTML into JSON and into HTML again without having any server side script doing this. What you want to do is make an AJAX request for a HTML file, extract the data you need and then insert that data into the current HTML file. — caisah
– caisah, Commented Mar 12, 2017 at 20:30

Brett Gregson · Accepted Answer · 2017-03-12 20:39:46Z

1

You can use jQuery.ajax with the json dataType parameter:

$.ajax({
    url: "feed.html",
    dataType: "json",
}).done(function(data) {
    console.log(data);
});

And in feed.html:

[{"hello":"world"}]

This will return a JSON object as the data value in the .done callback. So with your code:

$.ajax({
    url: "feed.html",
    dataType: "json",
}).done(function(data) {
    $.each(data, function (index, item) {
        $('#insider').append($('<option</option>').val(item).html(item));
    });
});

answered Mar 12, 2017 at 20:39

Brett Gregson

5,9133 gold badges44 silver badges60 bronze badges

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

1 Comment

O. Barinov Over a year ago

Unfortunately, above appended none. Html I am querying to contains of usual text in p and h# tags.

K Scandrett · Accepted Answer · 2017-03-12 20:36:53Z

0

You can use get http://api.jquery.com/jQuery.get/

$.get( "feed.html", function( data ) {
   var parsedHtml = [];

   // parse/split the html up here and push it onto the array
   ....

   $.each(parsedHtml , function (index, item) {
      $('#insider').append($('<option</option>').val(item).html(item));
   });
});

answered Mar 12, 2017 at 20:36

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

Collectives™ on Stack Overflow

Data from one html to another in JSON jQuery

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