I am interested in duplicating the li elements retrieved from a JSON source

Question

I am interested in duplicating the li elements retrieved from a JSON source

$.getJSON("leftlist.json" , function(data) {
        $.each(data.articles,function(){
        $('#ullist').before("<li id='mylic' style= color:blue class='item new"+cc+"'> "+el.name+"<div class='block'><div class='row'><button   onclick='copy()' id=btnc class='col button color-blue'>copy</button><button class='col button color-blue'>fav</button><button class='col button '><a class='a2a_dd' href='https://www.addtoany.com/share'><img src='imgs/share.png' width='171' height='16' border='0' alt='Share'/></a></button></div></li></div>");

        })
   });

javascript json

Answer 1

Answer №1

According to Sathish Thangaraj, the .append() method should be used:

// Accessing JSON data from an API

$.getJSON("https://www.json-generator.com/api/json/get/cpPsULBvKG?indent=2", function(data) {
  $.each(data, (i, el) => {
    $('#json_data').append(`<li>Value: ${el.value} | Key: ${el.key}</li>`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="json_data">

</ul>

Answer 2

According to Sathish Thangaraj, the .append() method should be used:

// Accessing JSON data from an API

$.getJSON("https://www.json-generator.com/api/json/get/cpPsULBvKG?indent=2", function(data) {
  $.each(data, (i, el) => {
    $('#json_data').append(`<li>Value: ${el.value} | Key: ${el.key}</li>`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="json_data">

</ul>

I am interested in duplicating the li elements retrieved from a JSON source

Answer №1

Similar questions

I am receiving an undefined value when using document.getElementsByClassName

JavaScript doesn't pause for the data to come back, resulting in an undefined value

How can I incorporate popups in React using mapbox-gl?

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

Alert: Unauthorized hook call and Exception: Cannot access properties of null (reading 'useState')

Issues with simple jquery and javascript: unable to add the class ".has-error" and onclick event not properly defined

Retrieve the key name that contains a specific value in JSON data

"Cookie Magic: Unleashing the Power of Ajax and

Execution of Ajax call fails to occur synchronously

What causes the element to remain visible despite the changes made to the v-show attribute?

Exclude mock files from webpack configuration in AngularClass/angular2-webpack-starter for production builds

What's the best way to align divs vertically in a compact layout?

Tips for adding text to your d3 force layout

The integration of Material-UI Autocomplete and TextField causes google autocomplete to activate

Vanilla JavaScript: toggling text visibility with pure JS

Tips for retrieving an element's outerHTML, innerHTML, and text content using JavaScript

Having trouble retrieving information from a JSON object? Unable to retrieve property 'company_about' of an undefined object?

Using MEAN.JS to Define Query Parameters for Mongo from the Client Controller

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Tips for removing the "" character from a JSON string using JavaScript