Create content with json and ajax

Question

Create content with json and ajax

Navigation

#1 by (1 votes)

0

I have some doubts and problems.

My code is as follows.

in html

<div id="summary"></div>

in js

function callurl() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: "GET",
    dataType: "json",
    success: function(msg) {
      JsonpCallback(msg);
    },
    error: function() {
      ErrorFunction();
    }
  });
}

function JsonpCallback(json) {
  for (var i = 0; i < json.length; i++) {
    $('#summary').append('<b>Post:</b> ' + json[i].id + '<br />');
    $('#summary').append('<b>Título:</b> ' + json[i].title + '<br />');
    $('#summary').append('<b>Descripción:</b> ' + json[i].body + '<br />');
    $('#summary').append('<hr />');
  }
}

callurl();

I need, the way to create a list.

Example.

Post: 1

Title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Boton Abrir contenido.

Clicking opens the content of that post.

Content: uia et suscipit suscipit recusandae expedquuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto.

I want to get to a small app, where a post feed with the title is shown and when I click on it, open the content of that post.

javascript html json ajax

asked by Juan David 28.03.2017 в 15:03

source

1 answer

How to create a Banner with StartApp? FatalErrorException in helpers.php line 36: Call to undefined function exif_imageType ()

score 1 · Answer 1

It can be improved but I think it gives you an idea of how to do it using only JQuery and Ajax:

function callurl() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts',
    type: "GET",
    dataType: "json",
    success: function(msg) {
      JsonpCallback(msg);
    },
    error: function() {
      ErrorFunction();
    }
  });
}

function JsonpCallback(json) {
  for (var i = 0; i < json.length; i++) {
    $('#summary').append('<b>Post:</b> ' + json[i].id + '<br />');
    $('#summary').append('<b>Título:</b> ' + json[i].title + '<br />');
    $('#summary').append('<span id="description_' + i + '"><b>Descripción:</b> ' + json[i].body + '<br /></span>');
    $('#summary').append('<button id="_' + i + '">Mostrar</button>');
    $('#summary').append('<hr />');
    $('#description_' + i).hide();
    $('#_' + i).on('click', function(event) {
    	var id = event.currentTarget.id;
    	$('#description' + id).show()
    })
  }
}

callurl();

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